Dynamic update of ng-include through controller and directive Angualar-js - angularjs

Question

Left side of the page sometimes have just info, sometimes it has side menu. When there is side menu, the content of main section depends on the option clicked.
Since the same kind of layout is used in multiple places, I created nested directives for the link/info side menu.
I have problem with the link option. Once link clicked, it calls the controller function to update the ng-include location of the main content holder. Controller does update the variable that holds the ng-include link, but ng-include does not include new template.
HTML:
Left Side
<left-side hasmenu='hasMenu' update-tab='updateTab' options='menuOptions'></left-side>
Main Content area:
<div id="tabContentWrapper" class="left two-third-screen-tab " ng-include="tab">
Controller:
var myStatsController = angular.module('myStatsController', []);
myStatsController.controller('StatsCtrl',
['$scope', '$rootScope',function ($scope, $rootScope){
//default tab
$scope.tab = 'stats/views/stats.html';
$scope.updateTab = function(newTab){
$scope.tab=newTab;
};
//all tabs
$scope.menuOptions =[{'text':'Stats','link':'stats/views/stats.html','isTab':true,'isFullScreen':false},
{'text':'Summary','link':'stats/views/summary.html','isTab':true, 'isFullScreen':false}
}]);
Directives:
1) Left Side directive
HTML:
<div class="sideMenu left">
<div ng-switch="hasmenu" class="sideMenuNavSection">
<side-menu ng-switch-when="true" update-tab="updateTab(tab)" options='options'></side-menu>
<side-info ng-switch-when="false" options='options'></side-info>
</div>
<home-button></home-button>
Directive code:
//left side area
myDirectives.directive('leftSide', function () {
return {
restrict: 'AE',
replace: true,
scope:
{
options: "=",
hasmenu:"=",
updateTab:"&"
},
templateUrl: 'shared/leftSide.html'
};
});
2) Directive that choose what to display link or info sections:
//side navigation
myDirectives.directive('sideMenu', function ($compile) {
return {
restrict: 'AE',
scope: {
options: "=",
updateTab:"&"
},
link: function (scope, element, attrs) {
for (var item in scope.options) {
if (scope.options[item].isTab === true) {
var link = scope.options[item];
element.append('<tab-link update-tab="'+attrs.updateTab+'" fullscreen = "' + link.isFullScreen + '" linktext="' + link.text + '" options="' + link.link + '"></tab-link>');
}
else {
// info section - not relevant for question
}
$compile(element.contents())(scope);
}
}
};
});
Finally Directive that constructs tabLink and calles controller function updateTab(newTab) to update $scope.tab for ng-include
myDirectives.directive('tabLink', function ($compile) {
return {
replace: true,
restrict: 'AE',
scope: {
options: "#",
linktext: "#",
fullscreen: "#",
updateTab:"&"
},
template: '<div class="infoText narrow "><div class="sideMenuItem bold">{{linktext}}</div><div class="greenArrow"></div></div>',
link: function (scope, element, attr) {
var tab = document.getElementById('tabContentWrapper');
tab = angular.element(tab);
element.on('click', function (event) {
//calls controller function
scope.updateTab()(scope.options);
$compile(tab.contents())(scope);
});
}
};
});
Thanks

Answer 1

Because you are initiating this thing with a normal element on click, It doesn't invoke the digest cycle. Add $scope.$apply() after $scope.tab=newTab;

Answer 2

Hello I also wanted to change the template dynamically and I found the one way of doing that as follows:
1) set ng-include value as follows:
<div ng-controller="mainCtrl">
<div id="tabContentWrapper" class="left two-third-screen-tab " ng-include="getTab()">
</div>
2) define function "getTab()" in your controller as follows:
app.controller("mainCtrl", function(){
$scope.getTab = function (){
// you can have different conditions here for e.g.
if(x){
return "x template path";
}else if (y){
return "y template path";
}
// Or you can just return path directly as "/return "path of the template";/"
}
});