I have implemented the stateProvider in my code, and I am facing an issue with updating the breadcrumbs in the header when the state changes. Instead of creating embedded views for each state, I have a service that shares an array of breadcrumbs containing their names and links. Whenever a state is called, a function inside each controller updates this array. I can see the values being updated in the service through the debugger, but the view does not refresh. Do you have any suggestions on how to resolve this issue?
Code: Header controller:
$scope.breadcrumbs = breadcrumbsService.breadcrumbs;
The View:
<md-button ng-repeat="breadcrumb in breadcrumbs" ui-sref="{{breadcrumb.link}}"> {{breadcrumb.title}} </md-button>
Service:
.service("breadcrumbsService", function Breadcrumbs() {
var self = this;
self.breadcrumbs = [
{title: "Home", link: "KeyStyle.home"}
];
});
Sample from another controller:
.controller("ownerRegistrationController", ["$scope", "Owner", "$http", "domain", "breadcrumbsService",
function ($scope, Owner, $http, domain, breadcrumbsService) {
updateBreadcrumbs();
...
function updateBreadcrumbs() {
breadcrumbsService.breadcrumbs = [
{title: "Home", link: "KeyStyle.home"},
{title: "New owner", link: "KeyStyle.home.owner.registration"}
];
}