title: Set focus when another element is clicked or other event occurs
body: <p>I have a tab-like view on my page and I have a variety of events which need to set the focus to one of the tabs. (showing/hiding the div is easy since I just use a model variable.) The events that cause a div to be focused are clicking on the tab header, data load completion, and initial loading.  I know where to intercept all these events, but I'm not sure how I tell the other element to set the focus (none of the intercept sites know about the other element, only about the model).</p>
  
  <p>I've looked around but can't find a good reference for this. I assume I want to listen for some message and post it from the various other locations.</p>
  
  <p>How does one setup this type of messaging event?</p>
  
  <hr>
  
  <p><strong>ANSWER</strong>: I built on the answer and came up with the below directive. It combines both a focus and show state for the div.</p>
  
  <pre><code>newsendApp.directive('showAndFocus', function() {
      return {
          link: function(scope, element, attr){ 
              scope.$on('SetArticlesListFocus',function() {
                  if( scope.$eval( attr.showAndFocus ) ) {
                      $(element).focus();
                  }
              })
  
              scope.$watch(attr.showAndFocus, function(value) {
                  if( value ) {
                      $(element).show();
                      setTimeout( function() { $(element).focus(); }, 0 );
                  } else {
                      $(element).hide();
                  }
              })
          }
      }
  });
  </code></pre>
  
  <p>If an event occurs which may require resetting the focus then I do: <code>$rootScope.$broadcast( 'SetArticlesListFocus' );</code></p>