UI Router controller not working when view is pulled in with $templateCache?

I am using gulp-angular-templatecache to convert all of my filename.view.html files into a templates.js file.

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

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

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.

My modules and associated controllers are relatively simple:

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

    }

})();

I have tried a few different ways around this but none have appeared to work:

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

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

It turns out that I was using a <form> element on my login template which for some reason Angular does like. I'm guessing I have implemented the <form> incorrectly in order for it to work with Angular.

Removing the <form> element resolves the issue.