Angular JS change property of controller for directive - angularjs

Question

I am trying to change boolean property of my controller from directive. It is set to true, but when i set it to false it should display other html template. Her is my code:
Directive code:
app.directive('entityTaskList', function(){
return {
restrict: 'E',
templateUrl: 'views/task/taskList.html',
scope: {
taskItems: '='
},
bindToController: true,
controller: 'TasksCtrl as taskCtrl',
link: function(scope, element, attrs){
scope.openItem = function(){
console.log("Open Items");
var ctrl = scope.taskCtrl;
ctrl.newTask = false;
};
}
};
});
TaskCtrl code:
app.controller('TasksCtrl', ['$scope', 'TaskService', function ($scope, TaskService) {
// initialize function
this.newTask = true;
this.name = "Nedim";
this.templates = {
new: "views/task/addTask.html",
view: "views/task/viewTask.html"
};
// load all available tasks
TaskService.loadAllTasks().then(function (data) {
$scope.items = data.tasks;
});
$scope.$on('newTaskAdded', function(event, data){
$scope.items.concat(data.data);
});
return $scope.TasksCtrl = this;
}]);
taskList.html
<ul class="list-group">
<li ng-repeat="item in taskCtrl.taskItems" class="list-group-item">
<a ng-click="openItem()">
<span class="glyphicon glyphicon-list-alt" aria-hidden="true"> </span>
<span>{{item.name}}</span>
<span class="task-description">{{item.description}}</span>
</a>
</li>
</ul>
and task.html
<!-- Directive showing list of available tasks -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<entity-task-list task-items="items"></entity-task-list>
</div>
<div class="col-sm-6" ng-controller="TaskDetailCtrl as taskDetailCtrl">
<!-- form for adding new task -->
<div ng-show="taskCtrl.newTask" ng-include="taskCtrl.templates.new"></div>
<!-- container for displaying existing tasks -->
<div ng-show="!taskCtrl.newTask" ng-include="taskCtrl.templates.view"></div>
</div>
</div>
</div>

Answer 1

If you change this:
// load all available tasks
TaskService.loadAllTasks().then(function (data) {
$scope.items = data.tasks;
});
To this(literally):
// load all available tasks
TaskService.loadAllTasks().then(function (data) {
this.items = data.tasks;
});
your code will work, this is due to you using the controllerAs syntax for TaskCtrl but not assigning it to this instead to the $scope