LP496 LP496 - 1 year ago 137
Javascript Question

Angular Injector Error for $modal

I am trying to create a modal using the

dependency in
. I am calling the
method from the
in the second
element in the
with the class

Although when I run this
below using bracket I get an error saying:

Error: [$injector:unpr]

Here is an overview of the code (I am extremely sorry that it is so long!):

Here is my
code below:

<html lang="en">

<script src="../vendors/js/angular.min.js"></script>
<script src="../vendors/js/ui-bootstrap-tpls-1.3.3.min.js"></script>
<script src="../resources/js/app.js"></script>

<body ng-app="App">
<div class="row" ng-controller="ModalController">
<img src="../resources/img/logos.png" alt="logo" class="logo">
<ul class="nav-list">
<li><a href="#" class="learn-more-link">Learn More</a></li>
<li><a href="#" class="login-button-link" ng-click="showModal()">Login</a></li>

This is my app.js:

var app = angular.module('App', ['ui.bootstrap']);

app.controller('ModalController', ['$scope', '$uibModal ', function($scope, $uibModal) {
$scope.showModal = function() {
var modalInstance = $uibModal.open({
animation: true,
templateUrl: '../HTML/templates/login-modal.html',
controller: 'newModalController',
resolve: {}

app.controller('newModalController', function($scope, $uibModalInstance) {
$scope.test = "Testing";

Now this is my template (which is passed in the
key for the
) method):

<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<script src="../resources/js/app.js"></script>

<body ng-app="App" ng-controller="newModalController">
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
<form name="userForm" ng-submit="submitToFB(userForm.$valid)" novalidate>
<div class="form-group">
<label><span class="glyphicon glyphicon-user"></span> Email</label>
<input type="text" name="email" class="form-control" ng-model="email" placeholder="Email" required>

<div class="form-group">
<label><span class="glyphicon glyphicon-eye-open"></span> Password</label>
<input type="text" name="password" class="form-control" ng-model="password" placeholder="Enter Password" required>

<button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>

Answer Source

ui-bootstrap modal service, with which you open and control modals is called $uibModal. replace your $modal with this.

Here is ui-bootstrap example for modals:

angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.animationsEnabled = true;

  $scope.open = function (size) {

    var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());

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


// Please note that $uibModalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]

  $scope.ok = function () {

  $scope.cancel = function () {

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download