I have a <ul> in my HTML view that is populated based on a $http.get request.
HTML:
<div id="recentlyReleased" ng-controller="sampleRecordController as recCtrl">
<h1>Sample Records</h1>
<ul>
<li class="last-child" ng-repeat="record in recCtrl.records">
<a target="_new" ng-href="" >
<span>sample 1</span>
</a>
</li>
</ul>
<a ng-click="recCtrl.displayRecords('a')" href="">
<img />
</a>
<a ng-click="recCtrl.displayRecords('b')" href="">
<img />
</a>
</div>
Factory
angular.module('homeApp.services', [])
.factory('homePage', function ($http) {
return {
showRecords: function (fac) {
return $http.get('/home/getRandom?num=10&fac=' + fac)
.then(function (response) {
return response.data
});
}
}
}
);
Controller
angular.module('homeApp.controllers')
.controller('sampleRecordController', function (homePage) {
var r = this;
r.base_url = base_url;
r.records = [];
var currentFac='c';
r.displayRecords = function (fac) {
homePage.setFac(fac);
homePage.showRecords(homePage.getFac()).then(function (data) {
r.records = data;
});
},
r.displayRecords(currentFac); //initial load
})
Although the initial loading of the <ul> list works fine, clicking on the <a> link does not refresh the HTML view. As a beginner in AngularJS, I would appreciate any guidance on how to resolve this issue. Thank you!