AngularJS passing data to bootstrap modal

Question

I think I'm missing something but cannot figure what.
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.

Controller

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; }; }); 

View

<div class="row" ng-controller="musicViewModel">     <script type="text/ng-template" id="myModalContent.html">         <div class="modal-header">             <h3 class="modal-title">I'm a modal!</h3>         </div>         <div class="modal-body">             <ul>                 <li>                     {{ selected }} // always gets null                 </li>             </ul>         </div>     </script> </div> 

Answer 1

I'd suggest you to pass the scope of your own controller instead of passing same controller again, by doing that you can remove the resolve also.

var modalInstance = $uibModal.open({     templateUrl: 'myModalContent.html',     scope: $scope, //passed current scope to the modal     size: 'lg' }); 

Otherwise you need to create a new controller and assign that controller for modal while opening it.

Answer 2

When you use resolve, the map is injected into the given controller.

I recommend that u use a different controller to handle the modal functionality (separation of concerns).

I also recommend to use dependency injection to support minification of the code. Step 5 on the Angular tutorial wil explain this.

A simplified example of the modal controller would be.

(function () {      'use strict';      var app = angular.module('App');      app.controller('musicDetailController',                  ['$scope', '$uibModalInstance', 'items',         function ($scope, $uibModalInstance, items) {              $scope.items = items;          }]); }());