title: Opening a DIV in the HTML as Modal in AngularJS
body: <p>Learning some AngularJS here...</p>
  
  <p>I have an Angular application which connects to an ASP.Net WebAPI. </p>
  
  <p>I am trying to have a DIV inside my HTML open as a modal window.</p>
  
  <p>My HTML looks as follows:</p>
  
  <pre><code>&lt;div class="container" style="padding-top:20px;"&gt;
      &lt;div ng-app="vehicleApp" data-ng-controller="testingController" class="container"&gt;
          &lt;div ng-show="error" class="alert alert-danger alert-dismissible" role="alert"&gt;
              &lt;button type="button" class="close" data-dismiss="alert"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;span class="sr-only"&gt;Close&lt;/span&gt;&lt;/button&gt;
              &lt;p&gt;{{ error }}&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="modal fade" id="vehicleModel" tabindex="-1" role="dialog" aria-hidden="true"&gt;
              &lt;div class="modal-dialog"&gt;
                  &lt;div class="modal-content"&gt;
                      &lt;div class="modal-header"&gt;
                          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;X&lt;/button&gt;
                          &lt;h4 class="modal-title" id="myModalLabel" ng-hide="editMode"&gt;Add vehicle&lt;/h4&gt;
                          &lt;h4 class="modal-title" id="myModalLabel" ng-show="editMode"&gt;Edit vehicle: {{ vehicle.Id }}&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;div class="modal-body"&gt;
                          &lt;form class="form-horizontal" role="form" name="addvehicleform"&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;label for="title" class="col-sm-3 control-label"&gt;vehicle Name&lt;/label&gt;
                                  &lt;div class="col-sm-7"&gt;
                                      &lt;input type="text" data-ng-model="vehicle.Name" class="form-control" id="vehiclename" placeholder="vehicle Name" required title="Enter your vehicle Name" /&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;label for="title" class="col-sm-3 control-label"&gt;Identification Account&lt;/label&gt;
                                  &lt;div class="col-sm-7"&gt;
                                      &lt;input type="number" data-ng-model="vehicle.vehicleIdentificationAccountId" class="form-control" id="vehicleIdentificationAccountId" placeholder="vehicle Identification Account" required title="Enter your Identification Account" /&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;div class="col-sm-offset-3 col-sm-7"&gt;
                                      &lt;span data-ng-hide="editMode"&gt;
                                          &lt;input type="submit" value="Add" ng-disabled="addvehicleform.$invalid" data-ng-click="add()" class="btn btn-primary normal-button" /&gt;
                                      &lt;/span&gt;
                                      &lt;span data-ng-show="editMode"&gt;
                                          &lt;input type="submit" value="Update" ng-disabled="addvehicleform.$invalid" data-ng-click="update()" class="btn btn-primary normal-button" /&gt;
                                      &lt;/span&gt;
                                      &lt;input type="button" value="Cancel" data-ng-click="cancel()" class="btn btn-primary" /&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/form&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;h1&gt;Vehicle List&lt;/h1&gt;
          &lt;p&gt;&lt;a data-ng-click="showadd()" href="javascript:;" class="btn btn-primary"&gt;Add New vehicle&lt;/a&gt;&lt;/p&gt;
          &lt;table class="table table-striped table-bordered table-hover table-condensed"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Vehicle ID&lt;/th&gt;
                      &lt;th&gt;Name&lt;/th&gt;
                      &lt;th&gt;Identification Account&lt;/th&gt;
                      &lt;th&gt;Action&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr data-ng-hide="agencies || agencies.length &gt; 0"&gt;
                      &lt;td colspan="4"&gt;
                          &lt;div class="text-center text-warning"&gt;
                              &lt;strong&gt;No Agencies Retrieved&lt;/strong&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr data-ng-repeat="vehicle in agencies"&gt;
                      &lt;td&gt;{{vehicle.Id}}&lt;/td&gt;
                      &lt;td&gt;{{vehicle.Name}}&lt;/td&gt;
                      &lt;td&gt;{{vehicle.vehicleIdentificationAccountId}}&lt;/td&gt;
                      &lt;td&gt;
                          &lt;a data-ng-click="get(vehicle)" href=""&gt;&lt;span class="glyphicon glyphicon-open"&gt;&lt;/span&gt;View&lt;/a&gt;
                          &amp;nbsp;
                          &lt;a data-ng-click="edit(vehicle)" href=""&gt;&lt;span class="glyphicon glyphicon-edit"&gt;&lt;/span&gt;Edit&lt;/a&gt;
                          &amp;nbsp;
                          &lt;a data-ng-click="showConfirm(vehicle)" href=""&gt;&lt;span class="glyphicon glyphicon-remove-circle"&gt;&lt;/span&gt;Delete&lt;/a&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
  
          &lt;hr /&gt;
  
          &lt;div class="modal fade" id="viewModal" tabindex="-1" role="dialog" aria-hidden="true"&gt;
              &lt;div class="modal-dialog"&gt;
                  &lt;div class="modal-content"&gt;
                      &lt;div class="modal-header"&gt;
                          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;X&lt;/button&gt;
                          &lt;h4 class="modal-title" id="myModalLabel"&gt;View vehicle Detail&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;div class="modal-body"&gt;
                          &lt;form class="form-horizontal" role="form" name="viewuser"&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;label for="ID" class="col-sm-3 control-label"&gt;ID&lt;/label&gt;
                                  &lt;div class="col-sm-7"&gt;
                                      {{vehicle.Id}}
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;label for="Name" class="col-sm-3 control-label"&gt;Name&lt;/label&gt;
                                  &lt;div class="col-sm-7"&gt;
                                      {{vehicle.Name}}
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;label for="vehicleIdentificationAccountId" class="col-sm-3 control-label"&gt;Identification Account&lt;/label&gt;
                                  &lt;div class="col-sm-7"&gt;
                                      {{vehicle.vehicleIdentificationAccountId}}
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/form&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 class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-hidden="true"&gt;
              &lt;div class="modal-dialog"&gt;
                  &lt;div class="modal-content"&gt;
                      &lt;div class="modal-header"&gt;
                          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;X&lt;/button&gt;
                          &lt;h4 class="modal-title" id="myModalLabel"&gt;Confirm&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;div class="modal-body"&gt;
                          Are you sure you want to delete vehicle: {{ vehicle.Name}}?
                      &lt;/div&gt;
                      &lt;div class="modal-footer"&gt;
                          &lt;button type="button" class="btn btn-warning" data-ng-click="delete()" style="width:100px;"&gt;Ok&lt;/button&gt;
                          &lt;button type="button" class="btn btn-primary" data-dismiss="modal" style="width:100px;"&gt;Cancel&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>testingController.js</p>
  
  <pre><code>'use strict';
  
  app.controller('testingController', function ($scope, testingDataService, $modal) {
      $scope.vehicles = [];
      $scope.vehicle = null;
      $scope.editMode = false;
  
      // Get vehicle
      $scope.get = function () {
          $scope.vehicle = this.vehicle;
          $('#viewModal').modal('show');
      };
  
      //get all vehicles
      $scope.getAll = function () {
          testingDataService.getvehicleList().success(function (data) {
              $scope.vehicles = data;
          }).error(function (data) {
              $scope.error = "An Error has occured while Loading vehicles! " + data.ExceptionMessage;
          });
      };
  
      // add vehicle
      $scope.add = function () {
          var currentvehicle = this.vehicle;
          if (currentvehicle != null &amp;&amp; currentvehicle.Name != null &amp;&amp; currentvehicle.vehicleIdentificationAccountId!= null) {
              testingDataService.addvehicle(currentvehicle).success(function (data) {
                  $scope.addMode = false;
                  currentvehicle = data;
                  $scope.vehicles.push(currentvehicle);
  
                  //reset form
                  $scope.vehicle = null;
  
                  $('#vehicleModel').modal('hide');
              }).error(function (data) {
                  $scope.error = "An Error has occured while Adding vehicle! " + data.ExceptionMessage;
              });
          }
      };
  
      //edit vehicle
      $scope.edit = function () {
          $scope.vehicle = this.vehicle;
          $scope.editMode = true;
          $('#vehicleModel').modal('show');
      };
  
      //update vehicle
      $scope.update = function () {
          var currentvehicle = this.vehicle;
  
          testingDataService.updatevehicle(currentvehicle).success(function (data) {
              currentvehicle.editMode = false;
  
              $('#vehicleModel').modal('hide');
          }).error(function (data) {
              $scope.error = "An Error has occured while Updating vehicle! " + data.ExceptionMessage;
          });
      };
  
      // delete 
      $scope.delete = function () {
          currentvehicle = $scope.vehicle;
          testingDataService.deletevehicle(currentvehicle).success(function (data) {
              $('#confirmModal').modal('hide');
              $scope.vehicles.pop(currentvehicle);
  
          }).error(function (data) {
              $scope.error = "An Error has occured while Deleting vehicle! " + data.ExceptionMessage;
  
              $('#confirmModal').modal('hide');
          });
      };
  
      //Modal popup events
      $scope.showadd = function () {
          $scope.vehicle = null;
          $scope.editMode = false;
          $('#vehicleModel').modal({ backdrop: 'static' });
          $('#vehicleModel').modal('show');
      };
  
      $scope.showedit = function () {
          $('#vehicleModel').modal({ backdrop: 'static' });
          $('#vehicleModel').modal('show');
      };
  
      $scope.showConfirm = function (data) {
          $scope.vehicle = data;
          $('#confirmModal').modal('show');
      };
  
      $scope.cancel = function () {
          $scope.vehicle = null;
          $('#vehicleModel').modal('hide');
      }
  
      // initialize your users data
      $scope.getAll();
  });
  </code></pre>
  
  <p>Basically when I click on the Add New Vehicle button, the console says:</p>
  
  <p><strong>ReferenceError: $ is not defined</strong></p>
  
  <p>on the line in the controller where it is supposed to show the modal:</p>
  
  <pre><code>$('#vehicleModel').modal({ backdrop: 'static' });
  </code></pre>
  
  <p>I am a bit lost on how to resolve this. </p>
  
  <p>Appreciate any insight.</p>
  
  <p>P.S. The data loads fine when this HTML view is loaded up. I also added a console.log inside the </p>
  
  <pre><code>$scope.showadd = function (){
    console.log('Test');
  };
  </code></pre>
  
  <p>and that is logged properly in the console. So totally lost right now...</p>
  
  <p>Update:
  Did a little more investigation. I issued in Chrome console the command:</p>
  
  <pre><code>$('#vehicleModel')
  </code></pre>
  
  <p>and it showed me the div with the id=vehicleModel. </p>