title: How to watch bootstrap accordion with angular in the least expensive manner
body: <p>I currently have a bootstrap accordion with an <code>ng-click</code> event set on the my panel headings that passes in a string like so:</p>
  
  <pre><code>&lt;a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" ng-click="setActiveAccordion('accordionOne')"&gt;
  </code></pre>
  
  <p>In the panel content, on the element with the directive, I have</p>
  
  <pre><code>&lt;div my-named-directive active-accordion="activeAccordion"&gt;
  </code></pre>
  
  <p>My controller to control the active accordion functionality looks like this:</p>
  
  <pre><code>.controller('accordionPanelController', ['$scope', function(scope){
      $scope.activeAccordion = 'null';
      //no accordion open by default
  
      $scope.setActiveAccordion = function(accordionName){
           $scope.activeAccordion = accordionName;
      };
  }]);
  </code></pre>
  
  <p>In the child directive, <code>my-named-directive</code>:</p>
  
  <pre><code>.directive('myNamedDirective', function(){
      return {
          scope: {
              activeAccordion: "="
          },
          controller: function ($scope) {
              //a bunch of irrelevant stuff
              $scope.$watch('activeAccordion', function (newValue){
                  if(newValue === "accordionOne"){
                      //do stuff
                  }
              }
          }
      }
  });
  </code></pre>
  
  <p>I am aware of a couple issues here.  First, it seems like the $watch is expensive and unnecessary.  More importantly, however, I take an issue with the child wanting/caring about a property on a parent object, rather than the parent dictating what the child does.</p>
  
  <p>Can someone help me understand what a better approach to this in angular is?</p>