title: AngularJS passing data to bootstrap modal
body: <p>I think I'm missing something but cannot figure what.<br>
  Basically I'm trying to pass an object to the modal like below, but instead of getting the passed object I gets null...so I think is a problem with the scope but I'm new in Angular and need some help.</p>
  
  <p>Controller</p>
  
  <pre><code>app.controller("musicViewModel", function ($scope, $http, $location, $uibModal, $log) {
  
  $scope.selected = null;
  
  $scope.open = function (item) {
  
      $scope.selected = item;
  
      $log.info('Open' + $scope.selected); // get right passes object
  
      var modalInstance = $uibModal.open({
          templateUrl: 'myModalContent.html',
          controller: 'musicViewModel',
          size: 'lg',
          resolve: {
              items: function () {
                  return $scope.selected;
              }
          }
      });
  };
  
  $scope.toggleAnimation = function () {
      $scope.animationsEnabled = !$scope.animationsEnabled;
  };
  });
  </code></pre>
  
  <p>View</p>
  
  <pre><code>&lt;div class="row" ng-controller="musicViewModel"&gt;
      &lt;script type="text/ng-template" id="myModalContent.html"&gt;
          &lt;div class="modal-header"&gt;
              &lt;h3 class="modal-title"&gt;I'm a modal!&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      {{ selected }} // always gets null
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>