Angular JS: binding in ng-show not working
angularjs, javascript
Solution
So repeating what Josh and I said in the comments above, the click handler runs "outside" of Angular, so you need to call `scope.$apply()` to cause Angular to run a digest cycle to notice the change that was made to `scope` (and then it will update your view):
$scope.toggle = function() {
$scope.opened = !$scope.opened;
console.log($scope.opened);
$scope.$apply();
}});
The link function can be eliminated by using ng-click in the template:
<div class="promptBlockResponse" ng-transclude ng-click="toggle()">
Problem
I have a directive and a controller: ``` app.directive('responseBox', function(){ return { restrict: 'E', transclude: true, templateUrl: 'responseBox.html', link: function(scope, element, attrs) { element.bind("click", function () { scope.toggle(); }) } }}); ``` and a controller: ``` app.controller('responseBoxCtrl', function($scope) { $scope.opened = false; $scope.toggle = function() { $scope.opened = !$scope.opened; console.log($scope.opened); }}); ``` responseBox.html: ``` <div class="promptBlockResponse" ng-transclude> <div class="btn-toolbar" style="text-align: right;"> <div class="btn-group" ng-show="opened"> <a class="btn btn-link" href="#"><i class="icon-pencil icon-white"></i></a> <a class="btn btn-link" href="#"><i class="icon-remove icon-white"></i></a> </div> </div> ``` And in the main html file: ``` <response_box ng-controller="responseBoxCtrl"></response_box> ``` I want the btn-group to show when the opened variable is true. When I click the responseBox I can see the variable toggling, but the btn-group does not show/hide. What am I missing?