title: Trying to fire a function inside an angular controller after bootstrap modal is dismissed
body: <p>I'm basically trying to figure out how to do a certain event listener within an angular controller. More specifically, when a bootstrap modal is dismissed I would like to fire a function within the angular controller. In jquery you can normally do something like:</p>
  
  <pre><code>$(.some-class).on('click', function() {
     // do something
  });
  </code></pre>
  
  <p>What i have is a side navigation with images as buttons. I have gray buttons for when they're inactive and red buttons when they're active. Each button launches a bootstrap modal. </p>
  
  <p>I'm using:</p>
  
  <pre><code>&lt;a type="button" data-toggle="modal" data-target="#overview" ng-click="launchOverview()"&gt;
      &lt;img ng-src="{{ sideNavActive.overviewSrc }}" /&gt;&lt;br /&gt;
    &lt;/a&gt;
  </code></pre>
  
  <p>and I have an object in my controller:</p>
  
  <pre><code>$scope.sideNavActive = {
          "overviewSrc": "img/side-nav/tab-overview-off.png",
          "detailsSrc": "img/side-nav/tab-details-off.png",
          "contactSrc": "img/side-nav/tab-contact-off.png"
  }
  </code></pre>
  
  <p>When the user clicks one of the side-nav buttons i have an ng-click function that changes the button to "img/...-on.png" so the button turns red (active). When the user clicks another side-nav button it turns that button red and the rest gray. </p>
  
  <p>What I'm trying to do is when the user clicks in the faded area around the modal to dismiss it, i also want the buttons to all reset to gray. According to the bootstrap documentation I should be able to fire a function on the 'hidden.bs.modal' event but I can't get it to work in my angular controller. I have the following function where '#overview' is my id for my modal.</p>
  
  <pre><code>$('#overview').on('hidden.bs.modal', function() {
          console.log('function fired!!!!!');
          $scope.sideNavActive = {
            "overviewSrc": "img/side-nav/tab-overview-off.png",
            "detailsSrc": "img/side-nav/tab-details-off.png",
            "contactSrc": "img/side-nav/tab-contact-off.png"
          }
        })
  </code></pre>
  
  <p>However, this function doesn't fire when the modal is dismissed and I can't figure out why. </p>
  
  <p>One thing I've done to see if the function is actually listening is changed it to:</p>
  
  <pre><code>$('body').on('click', function() {
    // function code here
  }
  </code></pre>
  
  <p>and it works. It fires whenever I click anywhere since it's listening on the 'body' element. So I know it's listening but for some reason the 'hidden.bs.modal' event isn't working.</p>