I am facing an issue with accessing a scope variable from the app controller in order to update it on a click event triggered by a custom Directive. It appears that the isolated scope of the Directive is unable to access the global scope.
The scope variable (currentTitle) is defined as follows:
app.controller('news', function($scope, $http, $timeout) {
$scope.promise = $timeout(function() {
$scope.articles = [{
title: 'Article 1',
content: 'It works!'
}, {
title: 'Article 2',
content: 'It still works'
}]
}, 3000);
$scope.currentTitle = "my - title";
$scope.showDetails = false;
});
The scope defined within the directive is:
scope: {
promise: '&?',
currentTitle: '=?',
showDetails: '=?bind'
}
Here is a codePen link containing all the code: http://codepen.io/valecarlos/pen/bpmryw
I am attempting to update the header title when one of the titles is clicked. Currently, I am trying to manually update the scope's currentTitle variable and using $apply inside the click event in the directive. However, the updated title is not reflected in the header.
Any assistance would be appreciated!