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

1

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?

2

sample code so someone can help you

3 
.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();

    	reviewFactory.postReview(reviewData).$promise.then(
    		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;
                      console.log($scope.task.completed);
                      pointsFactory.getPoints({user_id:$scope.state.user.id}).$promise.then(
                        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.reviewForm.$setPristine(true);
      		$scope.review = null;
    		},
    		function(error) { alert(error) }
    	);
    } else {
      $ionicPopup.alert({
        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){