nested views in angularjs

contact-controller.js

var app = angular.module('MyApp');

app.controller('ContactController', ['$scope', function($scope) {
		$scope.contacts = ["juntao", "abruzzi"];

    $scope.submit = function() {
      $scope.$parent.toggleContactsPanel();
    };
	}]);

contacts.html

<div ng-controller='ContactController'>
    <ul ng-repeat='contact in contacts'>
        <li>{{contact}}</li>
    </ul>
    <input type="button" ng-click="submit()" value="submit" />
</div>

main-controller.js

var app = angular.module('MyApp');

app.controller("MainController", ['$scope', funciton($scope) {
    $scope.showContacts = false;
    
    $scope.toggleContactsPanel = function() {
        $scope.showContacts = !$scope.showContacts;
    };  
  }]);

main-view.html

<span ng-click="toggleContactsPanel()">Click to show contacts</span>
<div ng-include="'views/contacts.html'" ng-show="showContacts">
</div>