Angularjs UI Bootstrap Popover Prevents input submit

Question

I have used Angularjs with ui.bootstrap popover feature in following manner,

<form name="frm1" role="form" ng-submit='myFunc()' novalidate="novalidate">
  .... other inputs go here...
<input type="number" ng-pattern="/^[0-9]+$/" name="testNo" ng-model='testNo' required popover="Locate number here" popover-trigger="focus">
<input type="submit" ng-model='funcBtn' value="Submit" ng-click="submitted = true" ng-disabled="value.length=0">
</form>

The issue is because of popover="Locate number here" popover-trigger="focus" code when I check after submitting the form the value for the input testNo is not passed to controller.

The Controller is as follows,

app.controller('myCtrl', ['$scope','$location','$log', function($scope,$location,$log)
{
  $log.log('testNo', $scope.testNo);
}]);

And If I remove the popover code from this input it works fine. I like to know whether there's a specific way in using popover into inputs.

Used resource ui.bootstrap example, input trigger: http://angular-ui.github.io/bootstrap/

Answer 1

The problem is that the current version of AngularJS can only have one scope for a given DOM element, and the popover creates a child scope that then gets inherited by the other directives. Fortunately, the solution is simple. Just refer to $parent. my_var in the directive, in your case ng-model="$parent.$model" .

Here is the popover FAQ on this problem.

I ran into this problem in the bowels of my own custom directive, but fortunately the solution is simple there as well: rather than refer to $scope.var, refer to $scope.parent.var. Simple solution, but hours of debugging!