javascript - Angular JS: binding in ng-show not working -

i have directive , 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 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 main html file:

<response_box ng-controller="responseboxctrl"></response_box> 

i want btn-group show when opened variable true. when click responsebox can see variable toggling, btn-group not show/hide. missing?

so repeating josh , said in comments above, click handler runs "outside" of angular, need call scope.$apply() cause angular run digest cycle notice change made scope (and update view):

$scope.toggle = function() {     $scope.opened = !$scope.opened;     console.log($scope.opened);     $scope.$apply(); }}); 

the link function can eliminated using ng-click in template:

<div class="promptblockresponse" ng-transclude ng-click="toggle()">