Stefano Vuerich Stefano Vuerich - 1 year ago 75
AngularJS Question

AngularJS passing data to bootstrap modal

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 I think is a problem with the scope but I'm new in Angular and need some help.


app.controller("musicViewModel", function ($scope, $http, $location, $uibModal, $log) {

$scope.selected = null;

$ = function (item) {

$scope.selected = item;

$'Open' + $scope.selected); // get right passes object

var modalInstance = ${
templateUrl: 'myModalContent.html',
controller: 'musicViewModel',
size: 'lg',
resolve: {
items: function () {
return $scope.selected;

$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;


<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 class="modal-body">
{{ selected }} // always gets null

Answer Source

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 = ${
    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.