ngClick不会在label标签内触发

Question

我正在尝试触发点击事件以切换显示密码。那是我的代码：

HTML

<div class="show-password" ng-click="toggleShowPassword();">
    <i class="ion-ios-eye-outline" ng-show="!showPassword"></i>
    <i class="ion-ios-eye" ng-show="showPassword"></i>
</div>

<label>
    <input type="password" ng-model="myPassword" ng-show="!showPassword">
    <input type="text" ng-model="myPassword" ng-show="showPassword">
</label>

JS

$scope.showPassword = false;
$scope.toggleShowPassword = function() {
    $scope.showPassword = !$scope.showPassword;
}

问题是：在<label>之外，功能正常（上图）。但是，如果我将<div class="show-password">放在<label>内，则函数toggleShowPassword()将无效。

我真的应该放置div label的{​​{1}}这样的内容吗？ （无论如何它都在工作，但感觉不对。）

还有其他方法可以实现这个功能吗？