Nesting ui-gmap-markers directives

Question

Is it possible to nest ui-gmap-markers directives (the plural version of ui-gmap-marker)?

For example, I have the following data structure:

vm.states = [{
        id: 1,
        name: 'California',
        location: {
            latitude: 36,
            longitude: -119
        },
        cities: [{
        id: 1,
            name: 'Los Angeles',
            location: {
                latitude: 33.75,
                longitude: -118
            }
        }, {
        id: 2,
            name: 'San Francisco',
            location: {
                latitude: 38,
                longitude: -123
            }
        }, {
        id: 3,
            name: 'San Diego',
            location: {
                latitude: 32.5,
                longitude: -117
            }
        }]
    }, {
        id: 2,
        name: 'Nevada',
        location: {
            latitude: 39,
            longitude: -117
        },
        cities: [{
        id: 4,
            name: 'Las Vegas',
            location: {
                latitude: 36,
                longitude: -115
            }
        }, {
        id: 5,
            name: 'Reno',
            location: {
                latitude: 39,
                longitude: -119
            }
        }]
    }];

I would like to display the cities associated with each state, so I would like to have:

<ui-gmap-markers models="vm.states">
     <ui-gmap-markers>

If I can, then what would I use for the "models" attribute in the nested directive?

I have been able to do this using ng-repeat with ui-gmap-marker. However, I am having some performance issues, so I would like to use the plural version of the directive.

JSFiddle of version using ng-repeat with the singular version of the directive (ui-gmap-marker)

JSFiddle of version using the plural version of the directive (ui-gmap-markers). Notice the nested ui-gmap-markers that I would like to use for the cities. I just don't know how to access the model from the parent.

Answer 1

I managed to display cities using lodash (the dependency was already set in the jsfiddle).

Here the jsfiddle

Here is the coding:

    vm.cities = _.reduceRight(vm.states, function(listCities, other) {
  return listCities.concat(other.cities);
}, []);

You can imagine put this code in a $watch() or watchCollection()

I hope it help you

Answer 2

Here's the working jsfiddle: http://jsfiddle.net/kozlice/x1dfa74n/3/

$scope.data = [ /* ... */ ];

$scope.statesList = [];
$scope.citiesList = [];

$scope.$watch('data', function (newValue, oldValue) {
    $scope.statesList.length = 0;
    $scope.citiesList.length = 0;

    angular.forEach($scope.data, function (state) {
        $scope.statesList.push(state);
        if (!angular.isArray(state.cities)) {
            return;
        }
        angular.forEach(state.cities, function (city) {
            $scope.citiesList.push(city);
        });
    });
}, true);

Any changes to data (as you most likely fetch it from server API) will trigger markers update.

PS. It's scope's responsibility to store data, controller must not be used for this purpose. Implicit DI annotation should also be avoided (in favor of inline array / $inject).