Updating ng-include from directive in Angular - angularjs

Question

I am trying to click on a list item that is created via a repeater and update the template value that is being used by ng-inlude. The initial value that is being set in the controller is working fine (shows up in DOM), however when i change the value in the directive, it is not updating the DOM (stays as initial included DOM). When i use fire bug on the directive it looks as though the scope has changed, although I'm not sure if I am missing something, or if i should be doing this some other way.
This is my partial
<div ng-controller="menuCtrl" >
<ul class="sub-menu">
<li ng-repeat="item in menuItems.left" menu-repeater-directive>
<span>{{item.name}}</span>
<a class="reset-menu-btn">×</a>
</li>
</ul>
<div id="lft-wrapper" class="a-wrapper">
<div ng-include="template.url" id="lft-scroller" class="a-scroller"></div>
</div>
</div>
This is my Menu Control
angular
.module('simApp')
.controller("menuCtrl", function($scope, $element) {
$scope.menuItems = {
left: [
{
name: "Table of Context",
url: "static/partials/tree.html"
},
{
name: "Index",
url: "static/partials/dictionary.html"
},
{
name: "Exercises",
url: "static/partials/exercises.html"
},
{
name: "Search Results",
url: "static/partials/results.html"
}
],
right: [
{
name: "About Writer's Help",
url: "static/partials/about.html"
},
{
name: "Tags & Tools",
url: "static/partials/tools.html"
},
{
name: "Your Class",
url: "static/partials/class.html"
},
{
name: "Top Ten",
url: "static/partials/top10.html"
}
]
}
$scope.template = $scope.menuItems.left[0];
});
This is my directive
angular
.module('simApp')
.directive("menuRepeaterDirective", function() {
return function(scope, element, attrs){
var self = this;
this.scope = scope;
this.element = element;
var $ele = $(element);
$ele.find("span").fastClick(function(ev){
//angular specific
var index = $(ev.currentTarget).parent().index();
self.scope.template = self.scope.menuItems.left[index];
//end angular specific
....some other Jquery stuff
});
}
});

Answer 1

Try:
self.scope.$apply(function(){ //Use $apply to let angular aware of the changes.
var index = $(ev.currentTarget).parent().index();
self.scope.$parent.template = self.scope.menuItems.left[index]; //accessing self.scope.$parent instead of self.scope
});
DEMO
Explanation why we have to access self.scope.$parent:
self.scope is the scope of the current item generated by ng-repeat while your ng-include is binding to menuCtrl's scope. self.scope.$parent is menuCtrl's scope in this case.