Angular Views Issue - Angular 1.5 - $stateProvider issue???- UI Router

Question

I have a simple application which uses the $stateProvider to toggle between templates/views. I have two links:

<a href="#" ng-click="manage('area')">Areas</a>
<a href="#" ng-click="manage('vendors')">Vendors*</a>

I have the following handler in the controller:

var vm = $scope;

vm.manage = function (type) {

    if (type == 'vendors') {
        vm.message = 'Comming soon.';
    } else {
        $state.go(type);
    }

};

When I click on the Areas link, I change the state to area (using the $state.go(...) call and then I see the template (and the html contents). Then, when I click the Vendors link I see the default message 'Comming soon'. Then when I click the Areas link again, I get the console.log from the area-controller but not the output (template and the html contents therein). What is going here, this is a very simple task that I do all the time and not sure why I'm not getting the static <h1></h1> the second time I request the $state change.

I have tried $scope.apply() and even $scope = $scope.new assuming somehow something in memory is clogged or something.

My module looks like this:

'use strict';
(function () {
    angular.module('areaModule', []).config(areaModule);

    areaModule.$inject = ['$stateProvider'];

    function areaModule($stateProvider) {
        $stateProvider
            .state('area', {
                url: '/area',
                templateUrl: 'app/assetManagement-app/modules/area/area.tmpl.html',
                controller: 'area-controller'
            });
    }
})();

and the controller looks like this

'use strict';
(function () {
    angular.module('areaModule').controller('area-controller', areaController);

    areaController.$inject = ['$scope', '$state', 'areaService'];

    function areaController($scope, $state, areaService) {

        var vm = $scope;

        // clean up any memory leaks
        $scope.$on('$destroy', function () { });

        // init()
        vm.init = function () {
            console.log('area controller');
        };

        vm.init();

        return vm;
    }
}());

and the template is here

<div class="container" style="margin: 10px 5px 10px 5px;">
    <h1>Area Management View</h1>
</div>

What's going on?

Answer 1

It is a clash between href and state.go. If you remove href in your html It is working as expected.