Get AngularJS app to display modal on click

Question

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

See my plunker or code below

html

<div class="container" ng-app="appUserSchedule">
<div ng-controller="CtrlUserSchedule" >

    <div class="row">
    <div class="col-md-10 col-md-offset-1">
    <div class="panel panel-default">
    <div class="panel-heading">User Schedule</div>

    <div class="panel-body">

    <div ng-cloak style="max-width:400px;">
      <header>
        <h3>User schedule</h3>
      </header>
      <ul>
        <li ng-repeat="x in userscheds">{{x.week_day}} {{x.time_start}}-{{x.time_end}}
            <span ng-click="showModal($index)" style="cursor:pointer;">Edit</span>
            <span ng-click="removeItem($index)" style="cursor:pointer;">Delete</span>
        </li>
      </ul>
      <div>
        <div>
          <div>
            <input placeholder="Add user schedule entry here" ng-model="addMe">
          </div>
          <div>
            <button ng-click="addItem()">Add</button>
          </div>
        </div>
        <p>{{errortext}}</p>
      </div>
    </div>


    </div>
    </div>
    </div>
    </div>

<!-- Modal -->
<div class="modal fade" id="modalContent.html" role="dialog">
<div class="modal-dialog">

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Edit</h4>
    </div>
    <div class="modal-body">
      <timepicker ng-model="dt1" hour-step="1" minute-step="15" show-meridian="true"></timepicker>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>

</div>
</div>



</div> <!-- ng-controller -->
</div> <!-- ng-app -->

js

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




    }


});

Answer 1

First is you need to add ui.bootstrap module to you ar angular app and pass $modal to your controller like this

var app = angular.module("appUserSchedule", ['ui.bootstrap']); 
app.controller("CtrlUserSchedule", function($scope,$http,$location, $modal) {

Then you need to add modalContent.html. This displays the html inside modal window

Answer 2

This may not be the answer, but make sure showModal is receiving the correct arguments. Appears you are only sending $index.

Would have simply made this a comment, but not quite there on the reputation yet. :-)

Answer 3

ng-repeat creates its own scope, hence the scope of your controller and the scope inside of the ng-repeat is not the same. therefore $scope.showModal will not be defined inside of the ng-repeat.

the main mistake you are doing here is the "there always has to be a dot in there" rule.

look here: Why don't the AngularJS docs use a dot in the model directive?

i would recommend to take a little tutorial about the most made angularjs mistakes first, because indeed there is some stuff to know about angularjs before you stop running into little traps like this.

furthermore you did not inject $modal to your controller which should lead in an error like $modal is undefined or something like that.

also you didn't even create/add the corresponding html file you are about to open.

and last but not least you didn't add any dependencies to your angular module regarding bootstrap. so your app won't be able to use/inject $modal anyhow.

see a working plunkr here:

http://plnkr.co/edit/rOjXt1C4E6lHRXUqHdHq?p=preview

have a look at the line where i am "putting the dot in"

 $scope.ctrl = this;

i replaced the templateUrl by a simple template because i think it's enough to give the idea.

in the end i have to say that there was so many things wrong about your code that you really should try to debug more on your own and try to accomplish things more step by step. since there have been like 4-5 mistakes in it this code barely can be your own, but rather is some random copy&paste stuff from anywhere. otherwise you could not have accomplished that many different lines of code which don't do anything, sorry.