Updating current list from one controller to another in angularjs? - angularjs

Question

Im having issues updating a list. I have tried both rootscope and using factory but it just doensn't update the view. Rather it remains the same. The only time the update works is if the list is empty to begin with otherwise the original load is always there. Appreciate any suggestions.
Here is my attempt using rootscope:
rootscope alternative
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{
replace:true,
templateUrl: 'views/questions.html',
controller: 'SiteController as vm'
})
.when('/categories',{
templateUrl: 'views/categories.html',
controller: 'CategoriesCtrl as cm'
})
.when('/categories/:name*',{
templateUrl: 'views/questions.html',
controller: 'SiteController as vm'
})
.otherwise({
redirectTo: '/'
})
}]);
index.html
<div class="col-xs-12 col-sm-8 col-md-8" ng-view>
All views load here
</div>
questions.html
<table class="table table-questions">
<thead>
</thead>
<tbody>
<tr dir-paginate-start="q in vm.allquestions>
<td>
<a class="questionlinks" ng-click="vm.viewquestion(q.idquestion)> {{q.question}} </a><h4></h4>{{q.date }}
</td>
<td class="text-center"><span class="box box-blue"> {{q.clicks}} </span></td>
</tr >
</tbody>
</table>
categories.html
<div class="wrapper content content-categories content-tags" id="categories_content">
<h2>Categories</h2>
<div class="col-md-12">
<ul class="list-tags" ng-repeat="c in cm.categories">
<li><a ng-href="#/categories{{c.categoryurl}}" ng-click="cm.getCategoryQuestions(c.idcategory)">{{c.categoryname}}</a></li>
</ul>
</div>
<div class="col-md-12">
<nav>
</nav>
</div>
</div >
Now the controllers
SiteController
(function () {
'use strict';
angular
.module('app')
.controller('SiteController', SiteController);
SiteController.$inject = ['$http','$route','$routeParams','$rootScope'];
function SiteController($http,$route,$routeParams,$rootScope) {
var vm = this;
vm.allquestions=[];
vm.thequestions=thequestions;
init();
function init(){
thequestions();
}
function thequestions() {
var url;
$rootScope.$on('updateQs',function(event, obj){
url=obj;
$http.get(url).then(function (response) {
vm.allquestions=response.data;
});
});
$http.get("/getlatestquestions").then(function (response) {
vm.allquestions=response.data;
});
}
}
})();
Categories Controller
(function () {
'use strict';
angular
.module('app')
.controller('CategoriesCtrl', CategoriesCtrl);
CategoriesCtrl.$inject = ['$http','$rootScope'];
function CategoriesCtrl($http,$rootScope) {
var cm = this;
cm.categories=[];
cm.categoryquestions=[];
//CATEGORIES
cm.getCategories=getCategories;
cm.getCategoryQuestions= getCategoryQuestions;
init();
function init(){
getCategories();
}
//CATEGORIES RELATED
function getCategories() {
var url="/getcategories";
var categoryPromise=$http.get(url);
categoryPromise.then(function (response) {
cm.categories=response.data;
})
}
function getCategoryQuestions(idcategory) {
var url="/getcategoryquestions"+idcategory;
$rootScope.$emit('updateQs',url);
}
}
})();
Factory alternative
Added this in the app.module file under app.config
app.factory("newquestions", function () {
var questions = {};
return {
setQs: function (value) {
questions = value;
},
getQs: function () {
return questions;
}
};
});
This in SiteController
(function () {
'use strict';
angular
.module('app')
.controller('SiteController', SiteController);
SiteController.$inject = ['$http','$route','$routeParams','newquestions'];
function SiteController($http,$route,$routeParams,newquestions) {
var vm = this;
vm.allquestions=[];
vm.thequestions=thequestions;
init();
function init(){
initial();
thequestions();
}
function initial(){
newquestions.setQs("/getlatestquestions");
}
function thequestions() {
var url=newquestions.getQs();
$http.get(url).then(function (response) {
vm.allquestions=response.data;
});
}
}
})();
This in CategoriesController
(function () {
'use strict';
angular
.module('app')
.controller('CategoriesCtrl', CategoriesCtrl);
CategoriesCtrl.$inject = ['$http','newquestions'];
function CategoriesCtrl($http,newquestions) {
var cm = this;
cm.categories=[];
cm.categoryquestions=[];
//CATEGORIES
cm.getCategories=getCategories;
cm.getCategoryQuestions= getCategoryQuestions;
init();
function init(){
getCategories();
}
//CATEGORIES RELATED
function getCategories() {
var url="/getcategories";
var categoryPromise=$http.get(url);
categoryPromise.then(function (response) {
cm.categories=response.data;
})
}
function getCategoryQuestions(idcategory) {
var url="/getcategoryquestions"+idcategory;
newquestions.setQs(url);
}
}
})();

Answer 1

It wouldn't work. There is no way to know either of your controllers to know that list has changed.
Solution
Use event broadcasts.
Broadcast or emit an event from two controllers. And use it as a trigger point.