Angular controller scope/variables not appearing

Question

I'm trying to clean up my code such that it corresponds to John Papa's Angular style guide but in the process broke something and my controller no longer appears in ng-inspector. If I can get vm.message to display I can figure out the rest (though any general feedback is appreciated :))

(function () {
  "use strict";

  angular
    .module('roomchoice.manager-dashboard.alerts', [
      'ui.router'
    ])

    .config(function config($stateProvider) {
      $stateProvider.state('manager.alerts', {
        url: '/alerts',
        views: {
          "main": {
            controller: 'AlertsController',
            templateUrl: 'manager-dashboard/alerts/alerts.tpl.html'
          }
        },
        data: {
          pageTitle: 'Alerts'
        }
      });
    })

    .controller('AlertsController', AlertsController);

    function AlertsController($scope, Restangular) {
      var vm = this;

      vm.message = "Hello";
      vm.settlements = [];
      vm.undepositedPayments = [];
      vm.unapprovedFunnels = [];
      vm.getSettlements = getSettlements;
      vm.getUndepositedPayments = get_UndepositedPayments;
      vm.getUnapprovedFunnels = get_unapprovedFunnels;

      function getSettlements() {
        Restangular.all('alerts/get_settlements').getList().then(function(settlements){
          vm.settlements = settlements;
          return vm.settlements;
        });
      }//End of getSettlements

      function getUndepositedPayments() {
        Restangular.all('alerts/get_undepositedpayments').getList().then(function(undepositedpayments){
          vm.undepositedPayments = undepositedpayments;
          return vm.undepositedPayments;
        });
      }//End of getUndepositedPayments

      function getUnapprovedFunnels() {
        Restangular.all('alerts/get_unapprovedfunnels').getList().then(function(unapprovedfunnels){
          vm.unapprovedFunnels = unapprovedfunnels;
          return vm.unapprovedFunnels;
        });
      }//End of getUnapprovedFunnels
    }//End of Controller
})();//End of Module

<div id="main" ng-controller="AlertsController as alerts">
	<div>
		<h1>Alerts (Under Construction) </h1>
		<h2>{{alerts.message}}</h2>
	</div>
</div>

Answer 1

You are trying to instantiate your controller more than once in your code, and this won't work the way you expect.

You should not use ng-controller in templates that are part of a state. The controller is defined by the state provider, and does not be instantiated inside the template.

Remove ng-controller from your template, and add controllerAs to your state:

$stateProvider.state('manager.alerts', {
    url: '/alerts',
    views: {
      "main": {
        controller: 'AlertsController',
        controllerAs: 'alerts',
        templateUrl: 'manager-dashboard/alerts/alerts.tpl.html'
      }
    },
    data: {
      pageTitle: 'Alerts'
    }
  });