We Keep Coding

Testing nested AngularJS promises with Jasmine

I'm looking to test nested promises and I'm not sure how to go about this.
How would I go about testing a scenario like this?
angular.module('moduleA')
.factory('serviceA', function(serviceB){
return {
create: create
}
function create(){
return serviceB.create().then(function(d){
serviceB.doSomething();
return $state.go("app.list", { id: d.id }).then(function(){
serviceB.doSomethingElse();
});
})
};
});
Where I would like to test
expect(serviceB, 'create').toHaveBeenCalled();
expect($state, 'go').toHaveBeenCalledWith("app.list", { id: newId });
expect(serviceB, 'doSomething').toHaveBeenCalled();
expect(serviceB, 'doSomethingElse').toHaveBeenCalled();
Here is my attempt:
describe('serviceA spec', function () {
var $rootScope, $state, serviceA, serviceB;
beforeEach(function () {
$state = {
go: function(){}
}
serviceB = {
create: {},
doSomething: {},
doSomethingElse: {}
}
module('app', function($provide){
$provide.value('serviceB', serviceB);
$provide.value('$state', $state);
});
inject(function (_$rootScope_, _serviceA_) {
serviceA =_serviceA_;
$rootScope = _$rootScope_;
});
});
it('should create', function(){
var newId = "555";
spyOn($state, 'go').and.callFake(function () {
var deferred = $q.defer();
deferred.resolve({});
return deferred.promise;
});
spyOn(serviceB, 'create').and.callFake(function () {
var deferred = $q.defer();
deferred.resolve({ id: newId });
return deferred.promise;
});
spyOn(serviceB, 'doSomething');
spyOn(serviceB, 'doSomethingElse');
serviceA.create();
expect(serviceB, 'create').toHaveBeenCalled();
expect($state, 'go').toHaveBeenCalledWith("app.list", { id: newId });
expect(serviceB, 'doSomething').toHaveBeenCalled();
expect(serviceB, 'doSomethingElse').toHaveBeenCalled();
$rootScope.$digest();
});
});
Any suggestions would be much appreciated

After each promise you have to call $rootScope.$apply() so promises are fullfilled.

How to save user info from LinkedIn API into Angularjs controller using a custom service

Im new to angular and I'm having trouble saving user info from LinkedIn API to the scope in my controller without passing the scope to my custom service. I assume that is not the angular way of programming.
//html
<script type="text/javascript" src="//platform.linkedin.com/in.js">
api_key: *********
onLoad: onLinkedInLoad
</script>
// linkedIn button
<script type="in/Login">
</script>
// app.js
angular.module("linkedinTestApp",[]);
function onLinkedInLoad(){
eScope.$apply(function(){
eScope.getLinkedInData();
})
};
// main controller
var eScope;
angular.module("linkedinTestApp").
controller('mainCtrl',function($scope,linkedInService){
eScope = $scope;
$scope.getLinkedInData = function(){
linkedInService.OnLinkedInFrameworkLoad($scope);
}
})
//custom service
angular.module('linkedinTestApp')
.service('linkedInService', function() {
var scope;
this.OnLinkedInFrameworkLoad = function(s) {
scope = s;
IN.Event.on(IN, "auth", this.OnLinkedInAuth);
console.log("Test1");
}
this.OnLinkedInAuth = function() {
IN.API.Profile("me").result(function(result){
console.log(result);
var profile = {
vnaam: result.values[0].firstName,
anaam: result.values[0].lastName,
foto: result.values[0].pictureUrl,
headline: result.values[0].headline,
id: result.values[0].id
}
console.log(profile);
scope.profile = profile;
});
console.log("Test2");
}
});

Tested code. Took me 20-30 minutes to get api key and when i tested someone posted answer, but my code was tested so a post this, similar, answer. Also this is not the most elegant way to get profile in the controller, but I wanted to change as little code as possible(for similary).
angular.module("linkedinTestApp",[]);
function onLinkedInLoad(){
eScope.$apply(function(){
eScope.getLinkedInData();
})
};
// main controller
var eScope;
angular.module("linkedinTestApp").
controller('mainCtrl',function($scope,linkedInService){
eScope = $scope;
$scope.getLinkedInData = function(){
linkedInService.OnLinkedInFrameworkLoad().then(function(profile){
console.log('response ', profile);
});
}
})
//custom service
angular.module('linkedinTestApp')
.service('linkedInService', function($q) {
this.OnLinkedInFrameworkLoad = function() {
var deferred = $q.defer();
IN.Event.on(IN, "auth", function(){
deferred.resolve(OnLinkedInAuth())
});
return deferred.promise;
}
function OnLinkedInAuth() {
var deferred = $q.defer();
IN.API.Profile("me").result(function(result){
console.log(result);
var profile = {
vnaam: result.values[0].firstName,
anaam: result.values[0].lastName,
foto: result.values[0].pictureUrl,
headline: result.values[0].headline,
id: result.values[0].id
}
deferred.resolve(profile);
});
return deferred.promise;
}
});

// main controller
angular.module("linkedinTestApp").
controller('mainCtrl',function($scope,linkedInService){
$scope.getLinkedInData = function(){
linkedInService.OnLinkedInFrameworkLoad().then (function (result) {
$scope.profile = result;
});
}
})
//custom service
angular.module('linkedinTestApp')
.service('linkedInService', function() {
this.OnLinkedInFrameworkLoad = function() {
return this.OnLinkedInAuth();
}
this.OnLinkedInAuth = function() {
return IN.API.Profile("me").result(function(result){
console.log(result);
var profile = {
vnaam: result.values[0].firstName,
anaam: result.values[0].lastName,
foto: result.values[0].pictureUrl,
headline: result.values[0].headline,
id: result.values[0].id
}
console.log(profile);
return profile;
});
}
});

My suggestion:
angular.module('linkedinTestApp').service('linkedInService', function($q) {
var deferred = $q.defer();
var self = this;
this.profile = null;
this.OnLinkedInFrameworkLoad = function() {
IN.Event.on(IN, "auth", this.OnLinkedInAuth);
console.log("Test1");
} // NOT SURE IF THIS FUNCTION IS NEEDED, OR WHO CALLS IT, MAYBE YOU NEED TO JUST REPLACE IT WITH THE NEXT LINE:
// IN.Event.on(IN, "auth", this.OnLinkedInAuth);
this.OnLinkedInAuth = function() {
IN.API.Profile("me").result(function(result){
console.log(result);
deferred.resolve( {
vnaam: result.values[0].firstName,
anaam: result.values[0].lastName,
foto: result.values[0].pictureUrl,
headline: result.values[0].headline,
id: result.values[0].id
} );
});
console.log("Test2");
}
this.instance = function() {
return deferred.promise;
}
});
And use it in your controller:
$scope.linkedInService.instance().then(
function(profile) {
console.log(profile);
}
);
Of course I haven't tested it, but I hope it will work...

Testing AngularJS with Jasmine / Karma with $httpBackend not working

I'm trying to unit test my app built on Angular with Jasmine via Karma. The app involves making a call to the GitHub API and pulling the names of all the repos of a user and filling an array with those names. I'm trying to test that the array is getting filled but I'm having some issues with $httpBackend.
The relevant parts of my controller are:
readmeSearch.controller('ReadMeSearchController', ['RepoSearch', function(RepoSearch) {
var self = this;
self.gitRepoNames = [];
self.doSearch = function() {
var namesPromise =
RepoSearch.query(self.username)
.then(function(repoResponse) {
addRepoNames(repoResponse);
}).catch(function(error) {
console.log('error: ' + error);
});
return namesPromise;
};
addRepoNames = function(response) {
self.repoSearchResult = response.data;
for(var i = 0; i < self.repoSearchResult.length; i++) {
var name = self.repoSearchResult[i]['name']
self.gitRepoNames.push(name);
};
};
}]);
My RepoSearch factory is:
readmeSearch.factory('RepoSearch', ['$http', function($http) {
return {
query: function(searchTerm) {
return $http({
url: 'https://api.github.com/users/' + searchTerm + '/repos',
method: 'GET',
params: {
'access_token': gitAccessToken
}
});
}
};
}]);
And the test in question is this:
describe('ReadMeSearchController', function() {
beforeEach(module('ReadMeter'));
var ctrl;
beforeEach(inject(function($controller) {
ctrl = $controller('ReadMeSearchController');
}));
describe('when searching for a user\'s repos', function() {
var httpBackend;
beforeEach(inject(function($httpBackend) {
httpBackend = $httpBackend
httpBackend
.expectGET('https://api.github.com/users/hello/repos?access_token=' + gitAccessToken)
.respond(
{ data: items }
);
}));
afterEach(function() {
httpBackend.verifyNoOutstandingExpectation();
httpBackend.verifyNoOutstandingRequest();
});
var items = [
{
"name": "test1"
},
{
"name": "test2"
}
];
it('adds search results to array of repo names', function() {
ctrl.username = 'hello';
ctrl.doSearch();
httpBackend.flush();
expect(ctrl.gitRepoNames).toEqual(["test1", "test2"]);
});
});
});
When I run the test I get the error
Expected [ ] to equal [ 'test1', 'test2' ].
So evidently this is because self.gitRepoNames is not being filled. When I console log ctrl.repoSearchResult just before the expectation in the test I get
Object{data: [Object{name: ...}, Object{name: ...}]}
Which is where the problem is I feel since self.repoSearchResult.length will be undefined when it is called in the for loop in the addRepoNames function.
So my question is why doesn't response.data return an array when it is called in the addRepoNames function in the test?
Any help would be greatly appreciated.
EDIT: I should mention that the app works fine when run on the server.

ctrl.doSearch is an asynchronous function. You should handle it in an async way. Try:
it('adds search results to array of repo names', function(done) {
ctrl.username = 'hello';
ctrl.doSearch().then(function() {
expect(ctrl.gitRepoNames).toEqual(["test1", "test2"]);
done();
});
httpBackend.flush();
});

Angular/Jasmin : can't get values passed while testing

I wrote a page that allows me to change my password. The code works and it does everything I want it to do, so I started writing tests. Since I'm not as experienced in Angular testing this had proven to be quite difficult and I can't get passed this error:
TypeError: 'undefined' is not an object (evaluating 'plan.apply')
at /Users/denniegrondelaers/asadventure/myproject-web/src/users/controllers/userPasswordController.js:9
at /Users/denniegrondelaers/asadventure/myproject-web/test/unitTests/specs/users/controllers/userPasswordControllerSpec.js:98
The controller:
userPasswordController.js
users.controllers.controller('userPasswordController',
['$scope', 'Session', '$state', 'UserService', 'languages',
function ($scope, Session, $state, UserService, languages) {
$scope.languages = languages;
$scope.password = "";
$scope.notEqual = false;
$scope.isSuccessful = false;
$scope.changePassword = function() {
var pw = {
userId: Session.getCurrentSession().userId,
oldPassword: encrypt($scope.password.oldPassword),
newPassword: encrypt($scope.password.newPassword),
newPasswordRepeat: encrypt($scope.password.newPasswordRepeat)
};
if (pw.newPassword === pw.newPasswordRepeat) {
$scope.notEqual = false;
UserService.setNewPassword(pw).then(function(res) {
$scope.formErrors = undefined;
$scope.isSuccessful = true;
}, function (error) {
$scope.formErrors = error.data;
}
);
} else {
$scope.notEqual = true;
}
};
var encrypt = function (password) {
var encrypted = CryptoJS.md5(password);
return encrypted.toString(CryptoJS.enc.Hex);
};
}
]
);
The service:
userService.js
userService.setNewPassword = function (password) {
return $http
.put(EnvironmentConfig.endpointUrl +
"/password/change", password)
};
The test:
userPasswordControllerSpec.js
describe('Users', function () {
describe('Controllers', function () {
fdescribe('userPasswordController', function () {
var $scope,
controller,
$q,
willResolve,
mockSession,
mockState,
mockUserService,
mockLanguages;
beforeEach(function () {
module('mysite.users.controllers');
module(function ($provide) {
$provide.value('translateFilter', function (a) {
return a;
});
$provide.value('$state', function (a) {
return a;
});
});
mockSession = {
getCurrentSession: function () {
return {userId: 4};
}
};
mockState = {
params: {
id: 1
},
go: function () {
}
};
mockLanguages = {
getLanguages : function () {
var deferred = $q.defer();
deferred.resolve({
data: [{}]
});
return deferred.promise;
}
};
mockUserService = {
setNewPassword : function () {
var deferred = $q.defer();
if (willResolve) {
deferred.resolve({
data: [{}]
});
}
return deferred.promise;
}
};
inject(function (_$q_, $controller, $rootScope) {
controller = $controller;
$q = _$q_;
$scope = $rootScope.$new();
});
controller('userPasswordController', {$scope: $scope, Session: mockSession, $state: mockState,
UserService: mockUserService, languages: mockLanguages
});
willResolve = true;
});
it('should change password', function () {
spyOn(mockUserService, 'setNewPassword').and.callThrough();
spyOn(mockState, 'go').and.callThrough();
spyOn(mockSession, 'getCurrentSession').and.callFake();
expect(mockUserService.setNewPassword).not.toHaveBeenCalled();
expect($scope.isSubmitable()).not.toBeTruthy();
$scope.compareStoreSelection = function () {
return true;
};
$scope.password = {
oldPassword: "123456",
newPassword: "password",
newPasswordRepeat: "password"
};
expect($scope.isSubmitable()).toBeTruthy();
>>> $scope.changePassword(); <<< LOCATION OF ERROR, line 98
expect(mockUserService.setNewPassword).toHaveBeenCalled();
$scope.$apply();
});
});
});
});
I've marked the line that gives the code in the test.
Anybody any idea how to fix this? A colleague suggested altering my controller code, but I'd like to keep it as it is, since it seems logical that this code shouldn't be altered for testing to work, right?
Solution
Yarons' suggestion to change the mockSession.getCurrentSession.callFake to mockSession.getCurrentSession.callThrough fixed it!

AngularJS - ng-bind not updating

I have a controller which has a function to get some alerts from an API and update a count on the front-end of my site which is bound to the alert.
Unfortunately the ng-bind attribute I'm using doesn't seem to be updating the count live, even though a simple console.log() is telling me that the actual alert count is being updated in the controller.
Front-end
<div class="modeSelector modeSelector_oneUp" data-ng-controller="MyLivestockController as vm">
<a class="modeSelector-mode" data-ui-sref="my-livestock">
<div class="modeSelector-type">Alerts</div>
<img class="modeSelector-icon" src="/inc/img/_icons/envelope-black.svg" onerror="this.src=envelope-black.png" />
<span data-ng-bind="vm.alertCount"></span>
</a>
</div>
Controller
(function() {
'use strict';
function MyLivestockController(userService) {
var vm = this;
vm.myLivestockNotification = {
isLoading: true,
hasError: false
};
vm.alertsNotification = {
isLoading: true,
hasError: false,
hasData: false
};
vm.deleteAlert = function(id) {
vm.currentAlert = void 0;
vm.alertsNotification.isLoading = true;
userService.deleteAlert(vm.user.id, id).then(function() {
// Remove the alert from our Array
vm.alerts = vm.alerts.filter(function(alert) {
return alert.id !== id;
});
// Refresh the alert count for the user
vm.getAlerts(vm.user.id);
vm.alertsNotification.isLoading = false;
vm.alertsNotification.hasError = false;
}, function() {
vm.alertsNotification.hasError = true;
});
};
vm.getAlerts = function(id) {
userService.getAlerts(id).then(function(alertData) {
vm.alertCount = alertData.length;
if (vm.alertCount > 0) {
vm.alertsNotification.hasData = true;
} else {
vm.alertsNotification.hasData = false;
}
vm.alerts = alertData;
vm.alertsNotification.isLoading = false;
vm.alertsNotification.hasError = false;
}, function() {
vm.alertsNotification.hasError = true;
});
};
// Init
(function() {
userService.getCurrentUser().then(function(data) {
vm.myLivestockNotification.hasError = false;
vm.myLivestockNotification.isLoading = false;
vm.user = data;
// Get alert count for the user
vm.getAlerts(vm.user.id);
}, function() {
vm.myLivestockNotification.hasError = true;
});
})();
}
angular
.module('abp')
.controller('MyLivestockController', MyLivestockController);
})();
Service
(function() {
'use strict';
function userService($q, $sessionStorage, $localStorage, $filter, user) {
var service = this;
service.getAlerts = function(id) {
var deferred = $q.defer();
user.alerts({ userID: id }, function(response) {
if (response.hasOwnProperty('data')) {
// Convert dates to valid Date
angular.forEach(response.data, function(alert) {
/* jshint camelcase: false */
if (alert.created_at) {
alert.created_at = $filter('abpDate')(alert.created_at);
/* jshint camelcase: true */
}
});
deferred.resolve(response.data);
}
else {
deferred.reject('DATA ERROR');
}
}, function(e) {
deferred.reject(e);
});
return deferred.promise;
};
angular
.module('abp')
.service('userService', userService);
})();
As you can see, I've got my getAlerts() function being called every time an alert is deleted, using the deleteAlert() function, but the <span data-ng-bind="vm.alertCount"></span> on the front-end only updates after refreshing the page, where I'd like it to update live.

Your bind is not updating because you change the value of alertCount outside of digest cycle of your angular app. When you refresh your app, the digest runs and thus your value gets updated. Wrap the update of the variable in $scope.apply() like so:
$scope.$apply(function(){
vm.alertCount = alertData.length;
});
This will force digest and update the value live.
If you have more values that are updated outside of digest (any callback, promise etc) you can force digest cycle by calling:
$scope.$apply();
Hope it helps.
EDIT -----
Given your update with full code, I see that you are not injecting scope anywhere in your controller, the controllers I write usually start like that:
(function () {
var app = angular.module('mainModule');
app.controller('myController', ['$scope', '$myService', function ($scope, $myService) {
//logic
}]);
}());
EDIT -----
Here is a quick go I had on your code:
(function() {
'use strict';
var app = angular.module('abp');
app.controller('MyLivestockController', ['$scope', 'userService', function($scope, userService) {
var vm = {};
$scope.vm = vm;
vm.myLivestockNotification = {
isLoading: true,
hasError: false
};
vm.alertsNotification = {
isLoading: true,
hasError: false,
hasData: false
};
vm.deleteAlert = function(id) {
vm.currentAlert = void 0;
vm.alertsNotification.isLoading = true;
userService.deleteAlert(vm.user.id, id).then(function() {
// Remove the alert from our Array
vm.alerts = vm.alerts.filter(function(alert) {
return alert.id !== id;
});
// Refresh the alert count for the user
vm.getAlerts(vm.user.id);
vm.alertsNotification.isLoading = false;
vm.alertsNotification.hasError = false;
}, function() {
vm.alertsNotification.hasError = true;
});
};
vm.getAlerts = function(id) {
userService.getAlerts(id).then(function(alertData) {
vm.alertCount = alertData.length;
if (vm.alertCount > 0) {
vm.alertsNotification.hasData = true;
} else {
vm.alertsNotification.hasData = false;
}
vm.alerts = alertData;
vm.alertsNotification.isLoading = false;
vm.alertsNotification.hasError = false;
//important, this is promise so we have to apply the scope to update view
$scope.$apply();
}, function() {
vm.alertsNotification.hasError = true;
});
};
// Init
(function() {
userService.getCurrentUser().then(function(data) {
vm.myLivestockNotification.hasError = false;
vm.myLivestockNotification.isLoading = false;
vm.user = data;
// Get alert count for the user
vm.getAlerts(vm.user.id);
}, function() {
vm.myLivestockNotification.hasError = true;
});
})();
}]);
})();
The general idea is:
you create an app (angular.module)
you create a controller in this app, with $scope injected
any values you want to be updated on your view, you add to $scope
if you have any $scope updates in a callback, event or promise, you wrap them in (or follow with) $scope.$apply call
I think this should work for you :)

I have attempted to reproduce your code below with a mock userService, and some slight modifications to the html view so we can more clearly see the alerts and delete them. I have not modified your Controller.
This appears to work, yes?
Which leads me to believe there may be some issue with the implementation of your userService. If you are able to post the relevant code, I can update this answer with a clarified solution.
UPDATE: As you've updated your question with the userService code, I've updated the below to more closely match. I still have a mock service standing in place of the user dependency of the userService. Additionally I made a couple of small edits to the Controller class so that while promises are still resolving we can see 'Updating...' in place of the alerts count.
This all still appears to work, unless I'm misunderstanding - will think on it more and update this 'answer' when I can think of where else to investigate for the source of the issue, see if we can at least reproduce it!
(function() {
'use strict';
function MyLivestockController(userService) {
var vm = this;
vm.myLivestockNotification = {
isLoading: true,
hasError: false
};
vm.alertsNotification = {
isLoading: true,
hasError: false,
hasData: false
};
vm.deleteAlert = function(id) {
vm.currentAlert = void 0;
vm.alertsNotification.isLoading = true;
return userService.deleteAlert(vm.user.id, id).then(function() {
// Remove the alert from our Array
vm.alerts = vm.alerts.filter(function(alert) {
return alert.id !== id;
});
// Refresh the alert count for the user
vm.getAlerts(vm.user.id).then(function() {
vm.alertsNotification.isLoading = false; //put here, loading isn't really finished until after .getAlerts() is done
vm.alertsNotification.hasError = false;
});
}, function() {
vm.alertsNotification.hasError = true;
});
};
vm.getAlerts = function(id) {
vm.alertsNotification.isLoading = true;
return userService.getAlerts(id).then(function(alertData) { //return the promise so we can chain .then in .deleteAlert()
vm.alertCount = alertData.length;
if (vm.alertCount > 0) {
vm.alertsNotification.hasData = true;
} else {
vm.alertsNotification.hasData = false;
}
vm.alerts = alertData;
vm.alertsNotification.isLoading = false;
vm.alertsNotification.hasError = false;
}, function() {
vm.alertsNotification.hasError = true;
});
};
// Init
(function() {
userService.getCurrentUser().then(function(data) {
vm.myLivestockNotification.hasError = false;
vm.myLivestockNotification.isLoading = false;
vm.user = data;
// Get alert count for the user
vm.getAlerts(vm.user.id);
}, function() {
vm.myLivestockNotification.hasError = true;
});
})();
}
function userMock($q, $timeout, $log) {
var _alerts = {
data: [{
id: 1,
message: "He doesn't sleep, he waits..."
}, {
id: 2,
message: "He doesn't mow his lawn, he stands outside and dares it to grow."
}, {
id: 3,
message: "Some magicians can walk on water. He can swim through land."
}]
},
_currentUser = {
id: 'Q2h1Y2sgTm9ycmlz'
};
return {
getCurrentUser: function getCurrentUser() {
$log.log("getCurrentUser");
//return $q.when(_currentUser);
return $timeout(function() { //use $timeout to simulate some REST API latency...
return _currentUser;
}, 500);
},
getAlerts: function getAlerts(id) {
$log.log("getAlerts: " + id); //not doing anything with the id in this mock...
$log.log(_alerts.data);
//return $q.when(_alerts);
return $timeout(function() {
return _alerts;
}, 500);
},
deleteAlert: function deleteAlert(userId, id) {
$log.log("deleteAlert: " + userId + " :: " + id);
//return $q.when(_alerts);
return $timeout(function() {
for (var i = 0; i < _alerts.data.length; i++) {
if (_alerts.data[i].id === id) {
_alerts.data.splice(i, 1);
$log.log("alert found and deleted");
break;
}
}
$log.log(_alerts.data);
return _alerts;
}, 500);
}
};
}
function userService($q, $timeout, $log, userMock) {
var service = this;
service.getCurrentUser = userMock.getCurrentUser;
service.getAlerts = function(id) {
var deferred = $q.defer();
userMock.getAlerts(id).then(function(response) {
if (response.hasOwnProperty('data')) {
// Convert 'he' to 'Chuck Norris'
angular.forEach(response.data, function(alert) {
if (alert.message) {
alert.message = alert.message.replace(/he/gi, "Chuck Norris");
}
});
deferred.resolve(response.data);
} else {
deferred.reject('DATA ERROR');
}
}, function(e) {
deferred.reject(e);
});
return deferred.promise;
};
service.deleteAlert = function(userId, id) {
var deferred = $q.defer();
userMock.deleteAlert(userId, id).then(function(response) {
deferred.resolve(response.data);
}, function(e) {
deferred.reject('DATA ERROR');
});
return deferred.promise;
};
return service;
};
angular
.module('abp', [])
.service('userMock', userMock)
.service('userService', userService)
.controller('MyLivestockController', MyLivestockController);
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<div ng-app="abp">
<div data-ng-controller="MyLivestockController as vm">
<div>Alerts</div>
<span data-ng-bind="vm.alertsNotification.isLoading ? 'Updating...' : vm.alertCount"></span>
<div data-ng-repeat="alert in vm.alerts">
{{alert.id}}: {{alert.message}}
<button ng-click="vm.deleteAlert(alert.id)">Delete</button>
</div>
</div>
</div>