Seeking assistance as I am new to Angular and struggling with binding data. The issue I'm facing is that when I create a list using ng-repeat based on an array of items, later when I calculate the distance and duration of a direction and add this data to the array, it doesn't update the list unless I press an orderby button.
Any help on resolving this problem would be greatly appreciated.
Here is my app.js code snippet:
var app = angular.module("myapp", ['ui.bootstrap']);
var OpenWifiData = {}; //variable to store openWifiData
var initialLocation;
var geoLocation = new Boolean();
var distance = 999999999999999999999999999999999999;
var closest;
var OpenWifiDataReceivingStarted = false;
app.factory('myService', function ($http) {
var myService = {
async: function () {
var promise = $http.get('http://localhost:3000/api/openData').then(function (response) {
OpenWifiData = response.data;
return response.data.data;
});
return promise;
}
}
return myService;
});
app.factory("OpenDataService", function () {
return { opendata: "" };
});
...
Below is the html code being utilized:
<div id="WifiSpots" ng-controller="ListController" class="col-sm-12 col-md-4 col-md-offset-2">
<div ng-repeat="item in openData | filter:searchText | orderBy: order">
<ul class="list-group">
<li class="list-group-item">
<div class="row wifiSpots" >
<div class="col-md-2">{{item.locatie}}</div>
<div class="col-md-2">{{item.gemeente}}</div>
<div clas="col-md-1">{{item.distance}}</div>
<div clas="col-md-1">{{item.duration}}</div>
<button ng-controller="MapController" ng-click="calculateAndDisplayRoute(item.objectid)" class="btn ">Selecteer</button>
</div>
</li>
</ul>
</div>
</div>