Parent / Child no show parent

AngularJS 1.4 Test app

by AUX Coder

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdn.rawgit.com/angular-ui/bootstrap-bower/0.13.4/ui-bootstrap-tpls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
<body ng-app="myApp">
	<div ng-controller="MainController">
	    <h3>{{title}}</h3>
		<ul class="nav nav-pills">
		  <li role="presentation" ng-class="{'active': state.current.name === 'parent'}"><a ui-sref="parent">Parent</a></li>
		  <li role="presentation" ng-class="{'active': state.current.name === 'parent.child'}"><a ui-sref="parent.child">Child</a></li>
		</ul>
		<br/>
		<div ui-view></div>
	</div>
</body>

CSS

.parent-view{
	border: 1px solid red;
}
.child-view{
	border: 1px solid blue;
}

JavaScript

angular.module('myApp', ['ui.bootstrap', 'ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('main', {
    url: '/main',
    controller: 'MainController'
  })
  .state('parent', {
    url: '/parent',
    template: '<div class="parent-view" ng-hide="hideParent"><h1>{{title}}</h1></div><div ui-view></div>',
    controller: 'ParentController',
  })
  .state('parent.child', {
    url: '/child',
    template: '<div class="child-view"><h1>This is the child View</h1>',
    controller: 'ChildController',
  });
  $urlRouterProvider.otherwise('/parent');
}])
.controller('MainController', ['$scope', '$rootScope', '$state', function($scope, $rootScope, $state){
	$scope.title = 'This is the Main View';
	$scope.state = $state;
	var parents = ['parent'];
	$rootScope.$on('$stateChangeSuccess', function(event, toState) {
		$scope.hideParent =  parents.indexOf(toState.name) !== -1 ? false : true;
	});
}])
.controller('ParentController', ['$scope', function($scope){
	$scope.title = 'This is the Parent View';
}])
.controller('ChildController', ['$scope', function($scope){
	$scope.title = 'This is the Child View';
}]);