Not working state

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
<div ng-app="App" ng-controller="AppCtrl">
    <div ui-view>       
        this is the main view        
    </div>
</div>

JavaScript

var App = angular.module("App", ["ui.router"]);
angular.module("App").controller("MemberController", function() {
    console.log("Member controller started");
});
angular.module("App").config(function($stateProvider) {
    $stateProvider
    .state("member", {
        url: "/member",
        abstract: true,
        template: "<div ui-view/>"
    })
    .state("member.list", {
        url: "/list", 
        /* This will inherit /member/ so will be /member/list */
        template: "<p>Replaced!!!</p>",
        controller: "MemberController"
    });
});

angular.module("App").controller("AppCtrl", function($state) {
    $state.go("member.list");
});