In my main app controller, I'm calling this async method which is broadcasting an event when done (loadData). In the event handler i'm loading some data to my $scope.layers array. But nothing is shown in my view.
The event is being fired and data is populated into the layers array.
This is the view:
<div ng-repeat="layer in layers track by $index">
<span>{{layer.name}}</span>
</div>
This is my controller
app.controller('MainPanelCtrl',['$scope', 'myService', function($scope, myService){
'use strict';
myService.loadData();
$scope.$on('loadDoneEvent', function () {
$scope.layers = myService.getLayers();
//$scope.$apply() // why when adding this its working?
});}]);
This is the service:
app.factory('myService', ['$rootScope', '$http', function ($rootScope, $http) {
'use strict';
var data;
var loadData = function (compId) {
$http.get("someUrl").then(function (response) {
data = response.data;
$rootScope.$broadcast('loadDoneEvent');
});
};
return {
loadData : loadData
};
}]);
I just can't get what i'm missing here...
I know I can use promises and it will work. But I want to be able to call this loadData function more than once and that my different UI components to response. Not sure if I can get this with promises.
I found this link and it's working for him so I just can't understand why it's not working for me...