I recently started working with Angular and encountered an issue that I couldn't find a solution for on Google or Stack Overflow. I believe my problem lies in not knowing what to search for. Here is the code snippet causing trouble: JSFiddle
HTML
<button ng-click="reload()">Reload</button>
<button ng-click="loadMore()">Load More</button>
<ul>
<li ng-repeat="item in list">{{ item }}</li>
</ul>
JavaScript
var app = angular.module('app', []);
app.controller('mainCtrl', ['$scope', 'mainSvr', function ($scope, mainSvr) {
$scope.list = mainSvr.list;
$scope.reload = mainSvr.reload;
$scope.loadMore = mainSvr.loadMore;
}]);
app.service('mainSvr', function () {
// private
var self = this;
// public
this.list = [];
this.reload = function () {
for (var i = 0; i < 5; i++) {
self.list.push(i * 10);
}
};
this.loadMore = function () {
var listLength = self.list.length;
for (var i = listLength; i < listLength + 5; i++) {
self.list.push(i * 10);
}
}
});
My issue arises when I click on reload, as I want to clear and repopulate the list to display numbers from 0 to 40 again. How can I achieve this? I attempted:
this.reload = function () {
self.list = [];
for (var i = 0; i < 5; i++) {
self.list.push(i * 10);
}
};
However, it didn't work as expected. The list did get cleared and repopulated as per my code, but the UI didn't reflect these changes. Even after using the debugger and breakpoints, I couldn't figure out why the UI wasn't updating when I reset the list using self.list = []; Any insights on where I went wrong would be greatly appreciated.