title: Angular JS: binding in ng-show not working
body: <p>I have a directive and a controller:</p>
  
  <pre><code>app.directive('responseBox', function(){
  return {
      restrict: 'E',
      transclude: true,
      templateUrl: 'responseBox.html',
      link: function(scope, element, attrs) {
          element.bind("click", function () {
              scope.toggle();
          })
      }
  }});
  </code></pre>
  
  <p>and a controller:</p>
  
  <pre><code>app.controller('responseBoxCtrl', function($scope) {
  $scope.opened = false;
  $scope.toggle = function() {
      $scope.opened = !$scope.opened;
      console.log($scope.opened);
  }});
  </code></pre>
  
  <p>responseBox.html:</p>
  
  <pre><code>&lt;div class="promptBlockResponse" ng-transclude&gt;
  &lt;div class="btn-toolbar" style="text-align: right;"&gt;
      &lt;div class="btn-group" ng-show="opened"&gt;
          &lt;a class="btn btn-link" href="#"&gt;&lt;i class="icon-pencil icon-white"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;a class="btn btn-link" href="#"&gt;&lt;i class="icon-remove icon-white"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;          
  </code></pre>
  
  <p></p>
  
  <p>And in the main html file:</p>
  
  <pre><code>&lt;response_box ng-controller="responseBoxCtrl"&gt;&lt;/response_box&gt;
  </code></pre>
  
  <p>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?</p>