title: Injecting JSON data into an AngularJS Bootstrap modal
body: <p>I searched all over S-O for an answer to this issue, but none seemed to work for my particular case. If this is potentially a duplicate, please forgive me.</p>
  
  <p>What I'm trying to do is insert my JSON data into a modal (which uses UI-Bootstrap) but I've been running in to trouble. I tried many different examples found through googling, but nothing showed the data. </p>
  
  <p>I created a new View for the modal window and the code looks like this:</p>
  
  <pre><code>&lt;div ng-controller="MainCtrl"class="modal-header"&gt;
              &lt;h3 class="modal-title"&gt;More Info&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
          &lt;p&gt;{{user.username}}&lt;/p&gt;
              &lt;ul&gt;
                  &lt;li ng-repeat="user in users"&gt;
                      &lt;a href="#" ng-click="$event.preventDefault(); selected.item = item"&gt;{{ user.username }}&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
              Selected: &lt;b&gt;{{ user.username }}&lt;/b&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button class="btn btn-primary" type="button" ng-click="ok()"&gt;OK&lt;/button&gt;
              &lt;button class="btn btn-warning" type="button" ng-click="cancel()"&gt;Cancel&lt;/button&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>This modal is called on the main.html (main view) which looks like this:</p>
  
  <pre><code>&lt;md-scroll-shrink&gt;&lt;header sticky layout="row" layout-xs="column" class="header"&gt;
    &lt;h3 class="text-center affix-top "&gt;User Directory&lt;/h3&gt;
  &lt;/header&gt;
  &lt;/md-scroll-shrink&gt;
  
  
  &lt;div layout="row" layout-md="column"&gt;
  
  
      &lt;div flex&gt;
        &lt;md-card id="card" ng-repeat="user in users"&gt;
          &lt;md-card-title&gt;
            &lt;md-card-title-text&gt;
              &lt;span class="md-headline"&gt;{{user.name}}&lt;/span&gt;
              &lt;span  class="glyphicon glyphicon-phone"&gt;&lt;/span&gt;
              &lt;span class="md-subhead"&gt;{{user.email}}&lt;/span&gt;
            &lt;/md-card-title-text&gt;
            &lt;md-card-title-media&gt;
  
            &lt;/md-card-title-media&gt;
          &lt;/md-card-title&gt;
          &lt;md-card-actions layout="row" layout-align="end center"&gt;
          &lt;button  ng-click="open()" class="btn btn-success"&gt;More Info&lt;/button&gt;
          &lt;/md-card-actions&gt;
        &lt;/md-card&gt;
      &lt;/div&gt;
  
  
  
  
  
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>And finally here is the main controller(main.js):</p>
  
  <pre><code>'use strict';
  
  /**
   * @ngdoc function
   * @name peapodTestApp.controller:MainCtrl
   * @description
   * # MainCtrl
   * Controller of the peapodTestApp
   */
  
  angular.module('peapodTestApp')
    .controller('ModalInstanceCtrl',function($scope,$uibModalInstance,UserService){
    $scope.ok = function () {
      $uibModalInstance.close();
    };
  
    $scope.cancel = function () {
      $uibModalInstance.dismiss('cancel');
    };
    })
  
    .controller('MainCtrl', function ($scope,UserService,$uibModal,$log) {
      this.awesomeThings = [
        'HTML5 Boilerplate',
        'AngularJS',
        'Karma',
        'ngMaterial'
      ];
  
      $scope.users = UserService;
      $scope.animationsEnabled = true;
  
    $scope.open = function (UserService,size) {
  
      var modalInstance = $uibModal.open({
        animation: $scope.animationsEnabled,
        templateUrl: 'views/modal.html',
        controller: 'ModalInstanceCtrl',
        size: size,
        resolve: {
          user: function () {
            return $scope.user;
          }
        }
      });
  
      modalInstance.result.then(function (selectedItem) {
        $scope.selected = selectedItem;
      }, function () {
        $log.info('Modal dismissed at: ' + new Date());
      });
    };
  
  
  
    })
    .service('UserService',function(){
      var user = [{
  
      "id": 1,
  
      "name": "Leanne Graham",
  
      "username": "Bret",
  
      "email": "Sincere@april.biz",
  
      "address": {
  
          "street": "Kulas Light",
  
          "suite": "Apt. 556",
  
          "city": "Gwenborough",
  
          "zipcode": "92998­3874",
  
          "geo": {
  
              "lat": "­37.3159",
  
              "lng": "81.1496"
  
          }
  
      },
  
      "phone": false,
  
      "website": "hildegard.org",
  
      "company": {
  
          "name": "Romaguera­Crona",
  
          "catchPhrase": "Multi­layered client­server neural­net",
  
          "bs": "harness real­time e­markets",
  
  
  
      }
  
  },
  
  {
  
      "id": 2,
  
      "name": "Ervin Howell",
  
      "username": "Antonette",
  
      "email": "Shanna@melissa.tv",
  
      "address": {
  
          "street": "Victor Plains",
  
          "suite": "Suite 879",
  
          "city": "Wisokyburgh",
  
          "zipcode": "90566­7771",
  
          "geo": {
  
              "lat": "­43.9509",
  
              "lng": "­34.4618"
  
          }
  
      },
  
      "phone": "010­692­6593 x09125",
  
      "website": "anastasia.net",
  
      "company": {
  
          "name": "Deckow­Crist",
  
          "catchPhrase": "Proactive didactic contingency",
  
          "bs": "synergize scalable supply­chains"
  
      }
  
  },
  
  {
  
      "id": 3,
  
      "name": "Clementine Bauch",
  
      "username": "Samantha",
  
      "email": "Nathan@yesenia.net",
  
      "address": {
  
          "street": "Douglas Extension",
  
          "suite": "Suite 847",
  
          "city": "McKenziehaven",
  
          "zipcode": "59590­4157",
  
          "geo": {
  
              "lat": "­68.6102",
  
              "lng": "­47.0653"
  
          }
  
      },
  
      "phone": "",
  
      "website": "ramiro.info",
  
      "company": {
  
          "name": "Romaguera­Jacobson",
  
          "catchPhrase": "Face to face bifurcated interface",
  
          "bs": "e­enable strategic applications"
  
      }
  
  },
  
  {
  
      "id": 4,
  
      "name": "Patricia Lebsack",
  
      "username": "Karianne",
  
      "email": "Julianne.OConner@kory.org",
  
      "address": {
  
          "street": "Hoeger Mall",
  
          "suite": "Apt. 692",
  
          "city": "South Elvis",
  
          "zipcode": "53919­4257",
  
          "geo": {
  
              "lat": "29.4572",
  
              "lng": "­164.2990"
  
          }
  
      },
  
      "phone": "493­170­9623 x156",
  
      "website": "kale.biz",
  
      "company": {
  
          "name": "Robel­Corkery",
  
          "catchPhrase": "Multi­tiered zero tolerance productivity",
  
          "bs": "transition cutting­edge web services"
  
      }
  
  },
  
  {
  
      "id": 5,
  
      "name": "Chelsey Dietrich",
  
      "username": "Kamren",
  
      "email": "Lucio_Hettinger@annie.ca",
  
      "address": {
  
          "street": "Skiles Walks",
  
          "suite": "Suite 351",
  
          "city": "Roscoeview",
  
          "zipcode": "33263",
  
          "geo": {
  
              "lat": "­31.8129",
  
              "lng": "62.5342"
  
          }
  
      },
  
      "phone": "(254)954­1289",
  
      "website": "demarco.info",
  
      "company": {
  
          "name": "Keebler LLC",
  
          "catchPhrase": "User­centric fault­tolerant solution",
  
          "bs": "revolutionize end­to­end systems"
  
      }
  
  },
  
  {
  
      "id": 6,
  
      "name": "Mrs. Dennis Schulist",
  
      "username": "Leopoldo_Corkery",
  
      "email": "Karley_Dach@jasper.info",
  
      "address": {
  
          "street": "Norberto Crossing",
  
          "suite": "Apt. 950",
  
          "city": "South Christy",
  
          "zipcode": "23505­1337",
  
          "geo": {
  
              "lat": "­71.4197",
  
              "lng": "71.7478"
  
          }
  
      },
  
      "phone": "",
  
      "website": "ola.org",
  
      "company": {
  
          "name": "Considine­Lockman",
  
          "catchPhrase": "Synchronised bottom­line interface",
  
          "bs": "e­enable innovative applications"
  
      }
  
  },
  
  {
  
      "id": 7,
  
      "name": "Kurtis Weissnat",
  
      "username": "Elwyn.Skiles",
  
      "email": "Telly.Hoeger@billy.biz",
  
      "address": {
  
          "street": "Rex Trail",
  
          "suite": "Suite 280",
  
          "city": "Howemouth",
  
          "zipcode": "58804­1099",
  
          "geo": {
  
              "lat": "24.8918",
  
              "lng": "21.8984"
  
          }
  
      },
  
      "phone": "210.067.6132",
  
      "website": "elvis.io",
  
      "company": {
  
          "name": "Johns Group",
  
          "catchPhrase": "Configurable multimedia task­force",
  
          "bs": "generate enterprise e­tailers"
  
      }
  
  },
  
  {
  
      "id": 8,
  
      "name": "Nicholas Runolfsdottir V",
  
      "username": "Maxime_Nienow",
  
      "email": "Sherwood@rosamond.me",
  
      "address": {
  
          "street": "Ellsworth Summit",
  
          "suite": "Suite 729",
  
          "city": "Aliyaview",
  
          "zipcode": "45169",
  
          "geo": {
  
              "lat": "­14.3990",
  
              "lng": "­120.7677"
  
          }
  
      },
  
      "phone": "586.493.6943 x140",
  
      "website": "jacynthe.com",
  
      "company": {
  
          "name": "Abernathy Group",
  
          "catchPhrase": "Implemented secondary concept",
  
          "bs": "e­enable extensible e­tailers"
  
      }
  
  },
  
  {
  
      "id": 9,
  
      "name": "Glenna Reichert",
  
      "username": "Delphine",
  
      "email": "Chaim_McDermott@dana.io",
  
      "address": {
  
          "street": "Dayna Park",
  
          "suite": "Suite 449",
  
          "city": "Bartholomebury",
  
          "zipcode": "76495­3109",
  
          "geo": {
  
              "lat": "24.6463",
  
              "lng": "­168.8889"
  
          }
  
      },
  
      "phone": "(775)976­6794 x41206",
  
      "website": "conrad.com",
  
      "company": {
  
          "name": "Yost and Sons",
  
          "catchPhrase": "Switchable contextually­based project",
  
          "bs": "aggregate real­time technologies"
  
      }
  
  }
  
  ];
  
      return user;
    })
  </code></pre>
  
  <p>Also, BTW I tried updating an earlier question but never received a response. If anyone has any tips, I would greatly appreciate the help. Thanks</p>
  
  <p><strong>UPDATE</strong> Unfortunately I am still having trouble getting my modal to display my JSON values, I've tried the suggested fixes and still nothing...any other suggestions would be helpful. Thanks</p>