Updating icon in real tme in Ionic - angularjs

Question

I have a favourites icon that should change from an outline to solid but it will only do this once the page has been reloaded. Is there any way to update this in real time without reloading the page.
It should update the ng-class to change from an outline to solid.
<i ng-class="{'icon ion-android-star': favicon(office.id), 'icon ion-android-star-outline': !favicon(office.id)}"
ng-click="togglefav(office.id); $event.stopPropagation();"></i>
This checks if the value is in local storage, then returns true or false.
.controller('APICtrl', function($scope, $http, $localstorage, $window, $state, $sce) {
// Search function
$scope.query = {}
$scope.queryBy = '$'
// gets the data from offices.json
$http.get('js/offices.json').then(function(resp) {
console.log('Success', resp);
$scope.offices = resp.data.office;
}, function(err) {
console.error('ERR', err);
// err.status will contain the status code
});
$scope.sce = function(loc1){
return $sce.trustAsHtml("https://www.google.com/maps/geocoding/json?address=loc1&key=AIzaSyBGAHnplGPjFoVvShk6Tsna3-DN8rHQBI8")
}
//retrieves localstorage array
//$scope.favourties= JSON.parse($window.localStorage['fav']);
//$scope.favourites = $window.localStorage['favs'] ? JSON.parse($window.localStorage['favs']) : []
//checks if the array if is in localstorage, if it isnt then it adds an array, if it is it parses the array
if($window.localStorage['fav']){
$scope.favorites = JSON.parse($window.localStorage['fav']);
var fav = JSON.parse($window.localStorage['fav']);
} else {
var fav = [];
$window.localStorage['fav'] = JSON.stringify(fav);
}
console.log(fav);
$scope.togglefav = function(id) {
//checks if the id being passed in is already in the array
//if it isn't it will add it to the beginning array then stringify it
if (fav.indexOf(id) == -1){
fav.unshift(id);
console.log(fav);
$window.localStorage['fav'] = JSON.stringify(fav);
}
//if it is then it will remove it from the array and stringify the array
else{
fav.splice(fav.indexOf(id), 1);
$window.localStorage['fav'] = JSON.stringify(fav);
console.log(fav);
}
}
//last viewed office view
if($window.localStorage['last']){
$scope.favorites = JSON.parse($window.localStorage['last']);
var last = JSON.parse($window.localStorage['last']);
} else {
var last = [];
$window.localStorage['last'] = JSON.stringify(last);
}
console.log(last);
$scope.lastview = function(id) {
//checks if the id being passed in is already in the array
//if it isn't it will add it to the beginning array then stringify it
var c = JSON.parse($window.localStorage['last']);
if (last.indexOf(id) == -1){
if (c.length > 3){
last.pop();
}
last.unshift(id);
$window.localStorage['last'] = JSON.stringify(last);
}
}
// used to change the favourites icon based on if its in the local storage or not
var e = JSON.parse($window.localStorage['fav']);
$scope.favicon = function(office){
return e.indexOf(office) !== -1;
};
// used to check if the item is in localstorage and check it against the json array
// if it matches then it will return true and be displayed
// this one is used for favourited offices
$scope.ifinfav1 = function(office){
return e.indexOf(office.id) !== -1;
};
var f = JSON.parse($window.localStorage['last']);
// this one is used for last viewed offices
$scope.ifinfav2 = function(office){
return f.indexOf(office.id) !== -1;
};
})

Answer 1

(function(angular) {
'use strict';
angular.module('includeExample', ['ngAnimate'])
.controller('ExampleController', ['$scope', '$q',
function($scope, $q) {
$scope.office = {
id: 'here'
};
//var e = JSON.parse($window.localStorage['fav']);
var e = ['here']
$scope.favicon = function(office) {
return e.indexOf(office) !== -1;
};
$scope.togglefav = function(office) {
if ($scope.office.id === 'here')
$scope.office.id = 'here2';
else
$scope.office.id = 'here';
};
}
]);
})(window.angular);
.ion-android-star{
color:red;
}
.ion-android-star-outline{
color:blue;
}
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular-animate.js"></script>
<body ng-app="includeExample">
<div ng-controller="ExampleController">
<i ng-class="{'icon ion-android-star': favicon(office.id), 'icon ion-android-star-outline': !favicon(office.id)}" ng-click="togglefav(office.id); "> Content</i> (click me)
</div>
</body>
you can use the $scope in office variable.
when you change the office will be visible to the template as well.