$scope.$apply.() also does not help and just produces an error that digest() is already running. I am changing the header of the page depending on the state name. It works and the header controller does its job, but when a different HtmlTemplate is loaded its controller scope variables aren't binding to it. I have a feeling it's because I am replacing the contents of the <header> element that has the 'ng-controller = HeaderController' attribute and this causes some kind of conflict.
Index.html
<body>
<header data-ng-controller="HeaderController" data-ng-include="headerUrl"></header>
</body>
header.controller.client.js
angular.module('core').controller('HeaderController', ['$scope','$state',
function($scope) {
function setHeader(stateName) {
var headerUrl = '';
switch(stateName) {
case '':
headerUrl = 'PrimaryHeader.client.view.html';
break;
case 'viewtemplate':
headerUrl = 'HeaderForProductDetails.view.html';
break;
default:
headerUrl = 'PrimaryHeader.client.view.html';
}
return headerUrl;
}
$scope.headerUrl = setHeader($state.current.name);
}
]);
PrimaryHeader.view.html
<script type="text/ng-template" id="PrimaryHeader.view.html">
<h2>
Hello I am the primary header template and I bind to the HeaderController scope.
</h2>
</div>
</script>
HeaderForProductDetails.view.html
<script type="text/ng-template" id="HeaderForPrductDetails.view.html">
<div data-ng-controller="HeaderForPrductDetailsController">
<h2>
Hello I am the header for product details and I should be able to bind to my own controller scope and that of my parent. But I don't.
</h2>
<div>{{somevalue}}</div> //this scope variable does not bind
</div>
</script>
headerforproductdetails.controller.client.js
angular.module('core').controller('HeaderForProductDetailsController', ['$scope'
function($scope) {
$scope.somevalue = 'Some test string'; //this does not bind to template, yet console.log() will output it just fine.
}
]);
