为什么提交表单后页面没有发生变化？

<style>
    ul { list-style: none; }
    label { float: left; margin-right: 30px; }
</style>

<div ng-controller="ctrl">
    <div>
        <div ng-if="!isEdit">
            <span class="icon-edit" ng-click="isEdit = !isEdit">edit</span>
            <ul>
                <li ng-repeat="item in items">
                    <label>{{item.title}}</label>
                    <span>{{item.value}}</span>
                </li>
            </ul>
        </div>
        <form ng-if="isEdit" ng-submit="submitForm()">
            <ul>
                <li ng-repeat="item in items">
                    <label>{{item.title}}</label>
                    <input type="text" ng-model="item.value">
                </li>
            </ul>
            <input type="button" value="取消" ng-click="isEdit = !isEdit">
            <input type="submit" value="提交">
        </form>
    </div>
</div>


function ctrl($scope) {
    'ngInject';
    $scope.items = [
        {
            title: "item1",
            value: "value1"
        },{
            title: "item2",
            value: "value2"
        },{
            title: "item3",
            value: "value3"
        }
    ];
    $scope.isEdit = false;
    $scope.submitForm = function(){
        $scope.isEdit = false;
    }
}

页面组成是这样的，一部分是信息显示，一部分是信息编辑；正常情况下显示部分展示，编辑部分隐藏；当点击edit后显示部分隐藏，编辑部分展示。

问题：

1. ng-click="isEdit = !isEdit" 无效

2. 为什么当点击了取消或提交按钮之后，页面没有发生任何变化呢，依旧是编辑部分展示？

pluker 展示请戳这里

---

ngIf是有作用域的，你的点击事件是在ngIf内，跨作用域操作的是在ngIf外面的isEdit

两种解决方法
1.把ngIf换成ngShow
2.把isEdit写成vm.isEdit解决跨作用域的问题；或者用$rootScope把isEdit放在根作用域；

$scope.vm={
    isEdit : false
}
    $scope.submitForm = function(){
        $scope.vm.isEdit = false;
    }

$rootScope.isEdit = false;
    $scope.submitForm = function(){
        $rootScope.isEdit = false;
    }