单击在AngularJS模块中触发两次

Question

我有以下html：

<div ng-repeat="email in user.emails" class="form-group">
            <label for="inputEmail_{{$index+1}}" class="col-lg-2 control-label">Email {{$index+1}}</label>
            <div class="col-lg-8 col-xs-11">
                <input type="email" class="form-control" id="inputEmail_{{$index+1}}" name="inputEmail_{{$index+1}}" placeholder="Email" required>
            </div>
            <div ng-if="$index == 0" class="col-lg-1 col-xs-1">
                <button type="button" class="btn btn-info addEmailBtn" ng-click="addEmailInput()">
                    <i class="fa fa-plus"></i>
                </button>
            </div>
            <div ng-if="$index != 0" class="col-lg-1 col-xs-1">
                <button type="button" class="btn btn-danger" ng-click="removeEmailInput($index)">
                    <i class="fa fa-trash"></i>
                </button>
            </div>
        </div>

我的控制器是：

module.controller('NewContactCtrl',
function EditProfileController($scope) {

    $scope.user = {
        emails: [
            { emailValue: "" }
        ]
    };


    $scope.addEmailInput = function () {
        $scope.user.emails.push({ emailValue: "" });
    };

    $scope.removeEmailInput = function (index) {
        $scope.user.emails.splice(index, 1);
    };

});

由于某些原因，当我点击.addEmailBtn时，点击事件会被触发两次，所以我得到两个新元素而不是一个。

编辑你可以在这里重现问题： http://jsbin.com/qiwehiwico/1/edit?html,js,output