AngularJS, updating scope between controllers and html - angularjs

Question

I have built a service that is keeping track of the id of a record within a telerik grid. On selecting a row in the grid the service successfully fires and updates the data. My problem is that the controller that handles my navigation doesn't see the change and I don't fully understand how to accomplish this as I am fairly new to angularjs and front end development.
app
.controller('FindCardCtrl', ['$scope', '$http', 'NavService', function($scope, $http, NavService) {
$http.get('../../sampleData/cardData.json').then(function(data) {
var cardObj = data.data.cards;
var grid = $("#grid").kendoGrid({
dataSource: {
data: cardObj.card,
},
columns: [{
hidden: true,
field: "id"
},
{
field: "card_number",
title: "Card Number"
},
{
field: "name_on_card",
title: "Name On Card"
},
{
field: "billing_zip_code",
title: "Billing Zip Code"
},
{
field: "balance",
title: "Balance"
}
],
noRecords: true,
editable: false,
sortable: true,
reorderable: true,
selectable: "row",
change: function(e) {
var selectedRows = this.select();
var selectedDataItems = [];
for (var i = 0; i < selectedRows.length; i++) {
var dataItem = this.dataItem(selectedRows[i]);
selectedDataItems.push(dataItem);
}
NavService.setCardId(selectedDataItems[0].id);
},
pageable: {
pageSize: 20,
previousNext: true,
input: true,
buttonCount: 5,
pageSizes: [20, 30, 40, "all"],
info: true,
messages: {
page: "Enter page"
}
},
filterable: {
mode: "menu",
ignoreCase: true,
operators: {
string: {
eq: "Equal to",
contains: "Contains",
startswith: "Begins with"
},
date: {
eq: "Equal to",
gt: "After",
lt: "Before",
eq: "Equals",
gte: "After or equal to",
lte: "Before or equal to"
}
}
}
});
});
}]);
'use strict';
app
.controller('NavCtrl', ['$scope', '$http', 'NavService', function($scope, $http, NavService) {
$scope.oneAtATime = false;
//$http.get('../../sampleData/cardData.json').then(function (data) {
//var card = getObjects(data, "id", NavService.cardData.cardId);
// });
$scope.$on('card-selected', function(event, NavService) {
console.log(NavService.cardData.cardId);
});
// console.log(NavService.cardData.cardId);
//$scope.cardId = NavService.cardData.cardId;
$scope.status = {
isFirstOpen: true
};
}]);
function getObjects(obj, key, val) {
var objects = [];
for (var i in obj) {
if (!obj.hasOwnProperty(i)) continue;
if (typeof obj[i] == 'object') {
objects = objects.concat(getObjects(obj[i], key, val));
} else if (i == key && obj[key] == val) {
objects.push(obj);
}
}
return objects;
}
'use strict';
/**
* #ngdoc overview
* #name backOfficeApp
* #description
* # backOfficeApp
*
* Main module of the application.
*/
/*jshint -W079 */
var app = angular
.module('backOfficeApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngSanitize',
'ngTouch',
'ngMessages',
'picardy.fontawesome',
'ui.bootstrap',
'ui.router',
'ui.utils',
'angular-loading-bar',
'angular-momentjs',
'kendo.directives',
'FBAngular',
'lazyModel',
'angularBootstrapNavTree',
'angularFileUpload',
'oc.lazyLoad',
'ui.select',
'ui.tree',
'ui.calendar',
'pascalprecht.translate',
'ngMaterial',
'localytics.directives',
'ipsum',
'angular-intro',
'dragularModule'
])
.run(['$rootScope', '$state', '$stateParams', function($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$rootScope.$on('$stateChangeSuccess', function(event, toState) {
event.targetScope.$watch('$viewContentLoaded', function() {
angular.element('html, body, #content').animate({
scrollTop: 0
}, 200);
setTimeout(function() {
angular.element('#wrap').css('visibility', 'visible');
if (!angular.element('.dropdown').hasClass('open')) {
angular.element('.dropdown').find('>ul').slideUp();
}
}, 200);
});
$rootScope.containerClass = toState.containerClass;
});
}])
.config(['uiSelectConfig', function(uiSelectConfig) {
uiSelectConfig.theme = 'bootstrap';
}])
//angular-language
.config(['$translateProvider', function($translateProvider) {
$translateProvider.useStaticFilesLoader({
prefix: 'languages/',
suffix: '.json'
});
$translateProvider.useLocalStorage();
$translateProvider.preferredLanguage('en');
$translateProvider.useSanitizeValueStrategy(null);
}])
.config(['$provide', function($provide) {
$provide.factory('NavService', function($q) {
var dataHolder = {};
//It's important that you use an object or an array here a string or other
//primitive type can't be updated with angular.copy and changes to those
//primitives can't be watched.
dataHolder.cardData = {
"cardId": '0'
};
dataHolder.setCardId = function(id) {
var deferred = $q.defer();
var cardId = id;
angular.copy(cardId, dataHolder.cardData);
deferred.resolve(dataHolder.cardData);
return deferred.promise;
}
return dataHolder;
})
}])
<div id="sidebar-wrap" ng-controller="NavCtrl">
<uib-accordion close-others="oneAtTime" slimscroll="{height: '100%'}">
<div uib-accordion-group is-open="status.isFirstOpen" class="panel-default">
<ul id="navigation" nav-collapse ripple>
<li ui-sref-active="active">
<a ui-sref="client.dashboard">
<fa name="dashboard"></fa> <span>{{ 'Menu.DASHBOARD'| translate }}</span></a>
</li>
<li ui-sref-active="active" ng-class="{'open':$state.includes('client.order')}">
<a ui-sref="client.order">
<fa name="shopping-cart"></fa> <span>{{ 'Menu.ORDER_MANAGEMENT' | translate }}</span></a>
<ul>
<li ui-sref-active="active">
<a ui-sref="client.order_management.new">
<fa name="caret-right"></fa> {{ 'Menu.NEW_ORDER' | translate }}</a>
</li>
<li ui-sref-active="active">
<a ui-sref="client.order_management.history">
<fa name="caret-right"></fa> {{ 'Menu.HISTORY' | translate }}</a>
</li>
<li ui-sref-active="active">
<a ui-sref="client.order_management.cancel">
<fa name="caret-right"></fa> {{ 'Menu.CANCEL' | translate }}</a>
</li>
</ul>
</li>
<li ui-sref-active="active" ng-class="{'open':$state.includes('client.card')}">
<a ui-sref="client.card">
<fa name="credit-card"></fa> <span>{{ 'Menu.CARD_MANAGEMENT' | translate }}</span></a>
<ul>
<li ui-sref-active="active">
<a ui-sref="client.card_management.find">
<fa name="search"></fa> {{ 'Menu.FIND_CARD' | translate }}</a>
</li>
</ul>
<ul ng-if="cardId > 0">
<li ui-sref-active="active">
<a ui-sref="client.card_management.summary({cardId: cardId})">
<fa name="caret-right"></fa> {{ 'Menu.SUMMARY'| translate }} </a>
</li>
</ul>
</li>
</ul>
</div>
</uib-accordion>
</div>

Answer 1

You can use the event system in Angular to notify other controllers that they need to update their values:
app.service('MyService', function($rootScope) {
var MyService = this;
var item;
MyService.setItem = function(value) {
/*-- code to set item --*/
// notify other controllers
$rootScope.$broadcast('item-changed');
};
MyService.getItem = function() {
// api call to get item
// or get current item value from variable
};
});
app.controller('MyOtherController', function($scope, MyService) {
$scope.$on('item-changed', function() {
MyService.getItem().then(function(result) {
$scope.item = result;
});
});
});
In your NavCtrl, you are most of the way there, you just need to set the scope variable to the new cardId in your event listener:
.controller('NavCtrl', [
'$scope', '$http', 'NavService',
function($scope, $http, NavService) {
//...
$scope.$on('card-selected', function(event, NavService) {
console.log(NavService.cardData.cardId);
$scope.cardId = NavService.cardData.cardId;
});
//...
}]);
You can't inject $scope into a service, but you can inject $rootScope. Broadcasting an event on $rootScope with send it to all scopes. Any scope that is listening for it will be able to respond to it.