UI Router controller not working when view is pulled in with $templateCache?
<p>I am using <code>gulp-angular-templatecache</code> to convert all of my <code>filename.view.html</code> files into a <code>templates.js</code> file.</p>

<p>I'm then using <code>$stateProvider</code> to create my states and pull in the templates using <code>$templateCache</code>, with an abstract "root" state.</p>

<pre><code>$stateProvider
    .state('app', {
        abstract: true,
        template: '&lt;div ui-view&gt;&lt;/div&gt;'
    })
    .state('app.login', {
        url: '/login',
        template: $templateCache.get('components/login/login.html'),
        controller: 'LoginController as login'
    });
</code></pre>

<p>Up to this point everything works fine. The templates load into my page just as they should, but no matter what I do I cannot get the controllers to work.</p>

<p>My modules and associated controllers are relatively simple:</p>

<pre><code>(function () {

    'use strict';

    angular
        .module('login', [])
        .controller('LoginController', LoginController);

    function LoginController () {

        var vm = this;

        vm.loginID = 'test';
        vm.password = 'test';

        vm.doLoginRequest = function () {
            console.log('Performing login request...');
        }

    }

})();
</code></pre>

<p>I have tried a few different ways around this but none have appeared to work:</p>

<ul>
<li>Moved template into the <code>.run(...)</code> section of the module and pushed it into <code>$templateCache</code> there instead</li>
<li>Different variations of <code>template</code>, <code>templateUrl</code> and <code>templateProvider</code> inside of the state config</li>
<li>Removing the controllerAs syntax from the state and using <code>ng-controller</code> instead</li>
<li>Using the old-style controller syntax (i.e. not controllerAs syntax)</li>
</ul>

<p>Does anyone have any suggestions on how I may resolve this issue? I've been tearing my hair our for hours!</p>