Angular JS UI Routing with multiple views

I am new to angular. I am trying to create a simple angular application. I wanted to incorporate UI Routing. But when the application is loaded facing the following error.

The UI routing is not taking place when i use multiple views. However it works for single views. Can you please help on this.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.22/angular-ui-router.js"></script>
<meta charset="ISO-8859-1">
<title>Insert title here</title>

</head>
<body>
<div ng-app="myApp">


<div ng-controller="myCtrl">
<input type="hidden" value="getDate" ng-model="user.handleID">
<p>Name</p>
<input type="text" ng-model="user.name">
<br>
<p>Age</p>
<input type="text" ng-model="user.age">
<br>
<br>
<button ng-click="myFunc()">OK</button>

<div ui-view="firstView">First</div>
<div ui-view="secondView">Second</div>
</div>
</div>

<script>
var app=angular.module("myApp", ["ui.router"]);
app.config(function($stateProvider){

    $stateProvider.state('result',{     
        url:'/result',
        views:{
            '[email protected]':{
               templateUrl: '/Registration/html/Result.html'
            },
            '[email protected]':{
               templateUrl: '/Registration/html/Result.html'
            }
        }       
    })
});
//var app=angular.module("myApp", ["ngRoute"]);
app.controller("myCtrl", ["$scope", "$http", "$state", function($scope, 
$http, $state){

$scope.myFunc=function(){
     $http(
        {
        url:'/Registration/RegisterServlet',
        method:'POST',
        contentType: 'application/json',
        data : JSON.stringify($scope.user),
        }
    ).then(function(data){
        console.log(data)
        $scope.result=data.data;
         $state.go("result");
    },function (error){
        $scope.result=data.data;
    }


    );

}

  }]);
</script>

Source: AngularJS