How to dynamically change view in angularjs using ui-router

I have a named view called myView in which I have two div elements that I want to show conditionally using ng-show based on whether the value of $scope.states['currentState'] is 'A' or 'B'. The value of $scope.states['currentState'] is changed when an anchor tag is clicked which calls the doStuff function on the myController controller.

The issue I am having is when the anchor tag is clicked and the doStuff function is clicked, it shows on the console that the value of $scope.states['currentState'] has been modified, but its not updating the myView named view accordingly.

Following is the code for app.js, myView.html and index.html files. The index.html file is being used as a <div ui-view></div> in an index.ejs file that I am rendering using Express with Node.js.

app.js

var app = angular.module("app", ['ui.router']).

    config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {

        $locationProvider.html5Mode(true);

        $urlRouterProvider.otherwise('/');

        $stateProvider
            .state('home', {
                url: '/',
                views: {

                    '': { templateUrl: 'partials/index.html' },

                    'myView@home': {
                        templateUrl: 'partials/myView.html',
                        controller: 'myController'
                    },

                    'myOtherView@home': {
                        templateUrl: 'partials/myOtherView.html',
                        controller: 'myController'
                    }
                }

            });

    }])

app.controller("myController", ['$scope', function($scope){

    var states = ['A', 'B'];
    $scope.states = states;
    $scope.states['currentState'] = states['currentState'] || 'A';

    $scope.doStuff = function(toState) {
        //doing stuff
        $scope.states['currentState'] = toState;
        console.log($scope.states['currentState']);
    };

} ]);

index.html

<div class="main">
    <div class="container">
        <div class="row margin-bottom-40">
            <div class="col-md-12 col-sm-12">
                <div class="content-page">
                    <div class="row">
                        <div ui-view="myView"></div>
                        <div ui-view="myOtherView"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

myView.html

<div ng-controller='myController'>
    <div ng-show="states['currentState'] == 'A'">
        //displaying this div if the currentState is A
        <a ng-click="doStuff('B')">Do stuff and show B</a>
    </div>
    <div ng-show="states['currentState'] == 'B'">
        //displaying this div if the currentState is B
    </div>
</div>

Could somebody help me understand that why am not getting the div with states['currentState'] == 'B' shown, even when I see the value of console.log($scope.states['currentState']) changed from 'A' to 'B' when the doStuff function is called in myController?

Edit: Here is the demo of the issue I am facing.