Angular ui-router sandbox

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>
<div ng-controller="ctrl">
    <ui-view></ui-view>
</div>

<script type="text/ng-template" id="parent.html">
    <div >Parent</div>
    <button  ng-click="goChild()">Child</button>
    <ui-view></ui-view>
</script>

<script type="text/ng-template" id="child.html">
    <div>Child</div>
    <button ui-sref="^">Back to Parent</button>
        
</script>

JavaScript

angular.module('app', ['ui.router']);
angular.module('app').config(function($stateProvider, $urlRouterProvider){
    $stateProvider.state('parent', {
        url: '/parent',
        controller: 'parentCtrl',
        templateUrl: 'parent.html'
    })
    .state('parent.child', {
        url: '/child',
        controller: 'childCtrl',
        templateUrl: 'child.html'
    });
  $urlRouterProvider.otherwise("/parent");
});
angular.module('app').controller('ctrl', function($scope, $state){
    console.log('ctrl init');
    $scope.$on('$stateChangeSuccess', function(st){
        console.log($state.current.name);
    });
});
angular.module('app').controller('parentCtrl', function($scope, $state){
    console.log('parentCtrl init');
    $scope.goChild = function(){
        console.log('send to child');
        $state.go('.child');
    };
});
angular.module('app').controller('childCtrl', function(){
    console.log('childCtrl init');
});
angular.bootstrap(document, ['app']);