Having some trouble with updating a results array in AngularJS using a service call. After submitting a form and calling the service, I set up my callbacks with .then() on the promise object. However, the view only updates when I start deleting characters from the input field. At that point, it displays the correct results.
Here's how my view looks:
<div id="main" ng-controller="SearchController as searchCtrl">
<div class="header" >
<h1>Search and Add Tracks</h1>
</div>
<form class="pure-form pure-g" novalidate ng-submit="searchCtrl.search()">
<div class="pure-u-1">
<input class="pure-input-1" type="search" placeholder="Search for tracks" ng-model="searchCtrl.query">
</div>
</form>
<div class="pure-u-1" >
{{searchCtrl.results.length}}
<div ng-repeat="track in searchCtrl.results" ng-include src="'templates/single-track-view.html'" >
</div>
</div>
</div>
And here is my controller code:
app.controller('SearchController',function(){
var searchCtrl = this;
searchCtrl.results = [];
searchCtrl.query = '';
this.search = function(query){
console.log(searchCtrl.query);
var processTracks = function(results){
console.log(results);
searchCtrl.results = results[0].tracks;
searchCtrl.results.push(results[1].tracks);
searchCtrl.query = '';
return results;
}
mopidy.library.search({"any": searchCtrl.query}).then(processTracks,console.error.bind(console));
}
});
Upon inspecting the scope with the AngularJS inspector, I can see that searchCtrl.results is being updated correctly with the results. However, the view does not update until I start deleting characters.
EDIT: It turns out that the result returned from the promise is actually an array of responses. The API I'm calling from Mopidy (a music player) sends different responses from various music providers.