title: How do I get Bootstrap modals to work with AngularJS?
body: <p>I would like to get my Bootstrap modals to work with AngularJS. One modal is</p>
  
  <pre><code>    &lt;div id="addToPlaylist" class="modal hide fade" aria-hidden="true" aria-labelledby="addToPlaylistLabel" role="dialog"&gt;
          &lt;div class="modal-header"&gt;
                  &lt;h3&gt;My Modal&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
  MODAL BODY
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button class="btn btn-primary"&gt;Save&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>It adds a song to a playlist the user already has or creates a new playlist. I want to use it with a set of songs, but only have it work with 1 song at a time (for now).</p>
  
  <pre><code>&lt;div class="cell" ng-repeat="song in media.data"&gt;
  &lt;/div&gt; &lt;!-- grid-wrapper --&gt;
  </code></pre>
  
  <p>The Angular controller is</p>
  
  <pre><code>'use strict';
  
  angular.module('PortalApp')
    .controller('SongsCtrl', function ($scope, MediaService, $location, AudioPlayerAPI, FavoriteService) {
  
  $scope.toggleFaves = function (song) {
  
    FavoriteService.toggle(song).success(function (response) {
      if (response.successFlag) {
        song.favorite = !song.favorite;        
      }
    });
  }    
  
  $scope.fetched = false;
  
  });
  </code></pre>
  
  <p>How do I make this work?</p>
  
  <p>P.S. I don't want jQuery, just the jQuery Lite plugin Angular has.</p>