ng-map vm.positions don't update

Question

I'm using ng-map directive with AngularJS. I have the follow code to generate marks. I save in array lat and long for every mark, as in the examples (https://ngmap.github.io/#/!marker_with_ng_repeat_dynamic.html) and I can see in logs that the info is correct. But isn't added in my map.

Here is my AngularJS code:

var app = angular.module('myApp', ['ngMap']);
app.controller('mapController', function($interval, $http) {
    var generateMarkers = function() {
        var vm = this;
        vm.positions = [];
        $http.get("data").
            success(function(data) {
            console.log(data);
            console.log("length array" + data.length);
            for (i = 0; i < data.length; i++) {
                var lat = parseFloat(data[i].latitud);
                var lng = parseFloat(data[i].longitud);
                console.log("pos: " +lat + lng);
                vm.positions.push([lat, lng]);
                console.log("vm.positions", vm.positions);
            }   
        }).
        error(function (data) {
            console.log("fallo");
        });
    };
  $interval(generateMarkers, 20000);
});

And my HTML code:

 <ng-map zoom="14" center="[42.8169, -1.6432]" default-style="false">
  <marker ng-repeat="p in vm.positions" position="{{p}}"></marker>
</ng-map>

And here my logs:

vm.positions [Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2]]0: Array[2]0: 42.8133161: -1.647981length: 2__proto__: Array[0]1: Array[2]0: 42.811868050589231: -1.635117530822754length: 2__proto__: Array[0]2: Array[2]0: 42.811868050589231: -1.639484167098999length: 2__proto__: Array[0]3: Array[2]0: 42.8139773239805951: -1.6452884674072266length: 2__proto__: Array[0]4: Array[2]0: 42.815834684266571: -1.6393446922302246length: 2__proto__: Array[0]5: Array[2]0: 42.8169010671877861: -1.6428154706954956length: 2__proto__: Array[0]6: Array[2]0: 42.8160038901641541: -1.6477882862091064length: 2__proto__: Array[0]7: Array[2]0: 42.811805086098651: -1.6448163986206055length: 2__proto__: Array[0]8: Array[2]0: 42.8174086747381: -1.6568756103515625length: 2__proto__: Array[0]9: Array[2]0: 42.805945172637361: -1.6659602522850037length: 2__proto__: Array[0]length: 10__proto__: Array[0]concat: concat()constructor: Array()copyWithin: copyWithin()entries: entries()every: every()fill: fill()filter: filter()find: find()findIndex: findIndex()forEach: forEach()includes: includes()indexOf: indexOf()join: join()keys: keys()lastIndexOf: lastIndexOf()length: 0map: map()pop: pop()push: push()reduce: reduce()reduceRight: reduceRight()reverse: reverse()shift: shift()slice: slice()some: some()sort: sort()splice: splice()toLocaleString: toLocaleString()toString: toString()unshift: unshift()Symbol(Symbol.iterator): values()Symbol(Symbol.unscopables): Object__proto__: Object

Here the plnkr: http://plnkr.co/edit/5uGUeyeuAie0TAFzIHMo?p=preview It's similar to the example, but adding a GET Request to obtain an array with the values of lat and lng. I updated the plnk deleting the GET Request and updating value of data.

Answer 1

Please check working plunkr

http://plnkr.co/edit/4EHaJXNWfVFCIHvCOu5p?p=preview

You take following code inside function please take it out from function.

var vm = this;
vm.positions = [];