$parent变量在ng-include上从单独的控制器设置时已损坏

我很难理解为什么下面的代码完全停止工作。基本上，当我试图从$parent范围中使用ng-show来隐藏和显示ng-include时，效果很好。例如，在附加的plnkr中，如果你点击"新建"，然后点击"取消"，或者只点击"切换"，ng include的可见性就会被适当地设置。

但是，如果我尝试从子作用域Cancel设置可见性，它会工作一次，然后完全失败。当您点击ng include中的"Cancel"按钮时，控制可见性的父作用域中的变量"createItemVisible"会以某种方式损坏。

我读过很多关于$parent-scope的其他帖子，但我从来没有看到过一次又一次提到它的工作原理。

plnkr在这里http://plnkr.co/edit/1tNpTzEBnTRHgvx6o0dc?p=preview

这是index.html代码：

<div ng-controller="MainCtrl">
<h3>Items</h3>
<button type="button" class="btn btn-primary" ng-click="createItem()">Create New Item</button>
<button type="button" class="btn btn-alert" ng-click="createItemVisible=!createItemVisible">Toggle</button>
<button type="button" class="btn btn-danger" ng-click="createItemVisible=false">Cancel</button>
<div ng-include="'inlineform.html'" ng-show="createItemVisible"></div>
</div>

以下是inlineform.html代码：

<div ng-controller="ItemDetailCtrl">
  <button type="button" class="close" ng-click="cancelItemDetail()">&times;</button>
  <h3>New Item</h3>
  <button ng-click="cancelItemDetail()" class='btn btn-danger'>Cancel</button>
</div>

这是脚本：

var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', function($scope) {
  $scope.createItemVisible = false;
  $scope.createItem = function() {
    $scope.createItemVisible = true;
  };
});
myApp.controller('ItemDetailCtrl', function($scope) {
  $scope.cancelItemDetail = function() {
    $scope.$parent.createItemVisible = false;
  }
});