title: Get AngularJS app to display modal on click
body: <p>I'm listing my schedule entries, now I'm trying to display a modal when clicking on edit for a specific entry. My goal is to be able to edit the values of my entries. But first, can't get the modal to even display</p>
  
  <p>See <a href="http://plnkr.co/edit/nBkQkLCQx3riqOopeQy1" rel="nofollow">my plunker</a> or code below</p>
  
  <p>html</p>
  
  <pre><code>&lt;div class="container" ng-app="appUserSchedule"&gt;
  &lt;div ng-controller="CtrlUserSchedule" &gt;
  
      &lt;div class="row"&gt;
      &lt;div class="col-md-10 col-md-offset-1"&gt;
      &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;User Schedule&lt;/div&gt;
  
      &lt;div class="panel-body"&gt;
  
      &lt;div ng-cloak style="max-width:400px;"&gt;
        &lt;header&gt;
          &lt;h3&gt;User schedule&lt;/h3&gt;
        &lt;/header&gt;
        &lt;ul&gt;
          &lt;li ng-repeat="x in userscheds"&gt;{{x.week_day}} {{x.time_start}}-{{x.time_end}}
              &lt;span ng-click="showModal($index)" style="cursor:pointer;"&gt;Edit&lt;/span&gt;
              &lt;span ng-click="removeItem($index)" style="cursor:pointer;"&gt;Delete&lt;/span&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;div&gt;
              &lt;input placeholder="Add user schedule entry here" ng-model="addMe"&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;button ng-click="addItem()"&gt;Add&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;p&gt;{{errortext}}&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;!-- Modal --&gt;
  &lt;div class="modal fade" id="modalContent.html" role="dialog"&gt;
  &lt;div class="modal-dialog"&gt;
  
    &lt;!-- Modal content--&gt;
    &lt;div class="modal-content"&gt;
      &lt;div class="modal-header"&gt;
        &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
        &lt;h4 class="modal-title"&gt;Edit&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
        &lt;timepicker ng-model="dt1" hour-step="1" minute-step="15" show-meridian="true"&gt;&lt;/timepicker&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
        &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  &lt;/div&gt; &lt;!-- ng-controller --&gt;
  &lt;/div&gt; &lt;!-- ng-app --&gt;
  </code></pre>
  
  <p>js</p>
  
  <pre><code>var app = angular.module("appUserSchedule", []); 
  app.controller("CtrlUserSchedule", function($scope,$http,$location) {
  
      $http.get('userschedule.json').success(function(data, status, headers, config) {
          $scope.userscheds = data.userschedules;
  
          console.log(data);
      }).error(function(data, status, headers, config) {
          console.log("No data found..");
    });
  
      $scope.addItem = function () {
          $scope.errortext = "";
          if (!$scope.addMe) {return;}
          if ($scope.userscheds.indexOf($scope.addMe) == -1) {
              $scope.userscheds.push($scope.addMe);
          } else {
              $scope.errortext = "The item is already in your list.";
          }
      }
      $scope.removeItem = function (x) {
          $scope.errortext = "";    
          $scope.userscheds.splice(x, 1);
      }
  
  
      $scope.showModal = function (action, x) {
  
        var modalInstance;
  
        modalInstance = $modal.open({
          templateUrl: 'modalContent.html',
          controller: 'CtrlUserSchedule',
          scope: $scope 
          });
  
          // This code for later                          
          // Save User Schedule Entry after making a change, then close modal    
              saveUserScheduleEntry = function(event) { 
  
               $http.put('').success(function(eventsuccess){
               }).error(function(err){
               /* do something with errors */
               });
               modalInstance.close();
          };   
  
          // This code for later
          // Close modal    
              closeUserScheduleEntry = function(event) { 
  
               $http.put('').success(function(eventsuccess){
               }).error(function(err){
               /* do something with errors */
               });
               modalInstance.close();
          };          
  
  
  
  
      }
  
  
  });
  </code></pre>