I am currently working on a directive that utilizes the Angular Bootstrap Popover and includes an input field. Everything seems to be functioning properly, except for the fact that the watch function is not being triggered.
For reference, you can view the code on Plunker.
The structure of the directive is as follows:
angular.module('ngUserPopover', ['ui.bootstrap'])
.directive('userPopover', function() {
return {
restrict: 'E',
scope: {
onSearch: '&',
},
templateUrl: 'myPopoverTemplate.html',
link: function (scope, element, attr) {
scope.templateUrl = 'someTemplate.html'; // URL for popover content template
scope.searchText = 'Type something'; // Initial value example for input
scope.$watch(function () {
return scope.searchText;
}, function () {
// Pass the new input value in the method...
console.log(scope.searchText);
});
}
}
});
The content of myPopoverTemplate.html is as follows:
<button uib-popover-template="templateUrl" popover-placement="right" popover-trigger="click" class="btn btn-default">Popover With Template</button>
<script id="someTemplate.html" type="text/ng-template">
<div>{{dynamicPopover.content}}</div>
<div class="form-group">
<input type="text" ng-model="searchText" class="form-control">
</div>
</script>
The button uses the Angular Bootstrap UI popover directive with a custom template (someTemplate.html).
An anomaly occurs where the input field inside the popover initially displays the value defined in the searchText variable of my directive's scope (which is 'Type something'). The watch function is executed once (as shown in the browser console), but it does not trigger again when the input value is modified.
Despite utilizing the angular bootstrap directive, the $watch function associated with the scope variable used for the ng-model of the input field is not functioning as expected (the console.log statement fails to execute upon editing the input value).
Any suggestions or insights would be greatly appreciated?