$IonicPopup errors when I define it in my controller, $ionicModal is fine. Im stumped


So I am trying to get popups to work with Ionic but I keep getting the following error.

 Unknown provider: TemplateLoaderProvider <- TemplateLoader <- $ionicPopup

I don’t understand why. My entire app is based around the starter app template from Ionic. I have [‘ionic’] defined in my app.

my controller definition looks like this.

.controller('MainCtrl', function($scope, $ionicPopup, stateService, pointsFactory, taskFactory) {

Whats weird is that one of my other controllers uses $ionicModal fine.

controller('createAccountCtrl', function($scope, $ionicModal, $http, stateService, ENV) {

That works. Why is $ionicPopup failing?


sample code so someone can help you

.controller('openReviewCtrl', function($scope, $ionicPopup, pointsFactory, reviewFactory, $http, $stateParams, stateService, taskFactory) {
	var state = stateService.getState();

  var reviewData = {
    name: "default",
    text: "default",
    rating_overall: "default"

  $scope.task = {
    task_id: state.task.id,
    completed: state.task.completed,
    worth: state.task.worth

	$scope.writeReview = function(isValid) {
    if (isValid){
	 		reviewData = $scope.review;
      reviewData.user_id = stateService.getUserId();
      reviewData.business_id = stateService.getBusinessId();

    		function(value) { 
    			alert('Thank you for your submission.');

          taskFactory.isTaskComplete({user_id: state.user.id , app_task_id: $scope.task.task_id}).$promise.then(
            function(result) { 
              var isComplete = result['isComplete'];
                if (isComplete === "true") {
                  alert("You have already earned points for this task");
                } else {
                  pointsFactory.addPoints({ user_id:reviewData.user_id, app_task_id: $scope.task.task_id, worth: $scope.task.worth}).$promise.then(
                    function(result) { 
                      alert("successfully added points");
                      $scope.task.completed = true;
                        function(result) { 
                          var points = result['points'];
                          stateService.setState('user', 'points', result['points']);
                        function(error) { console.log("error getting points"); }
                    function(error) { alert("error adding points") }
            function(error) { console.log("error checking task"); }

      		$scope.review = null;
    		function(error) { alert(error) }
    } else {
        title: 'Form error.',
        content: 'The form is invalid.'
      }).then(function(res) {
        console.log('invalid form');


Thats my complete openReview controller that uses the ionicPopup to alert out when the form is invalid.

My app.js file defines Ionic

angular.module('starter', ['ionic', 'starter.services', 'starter.controllers', 'ngSanitize', 'LocalStorageModule', 'ngResource', 'config'], function($httpProvider){