Steve Steve - 3 months ago 50x
AngularJS Question

Working with a form inside an Angular UI Bootstrap popover?

I have a button that pops up an Angular UI Bootstrap popover, using a template.

You can view it in this pen

The popover template is a form with a table containing a series of text fields with ng-models:

<script type="text/ng-template" id="filterPopoverTemplate.html">
<div class="filters">
<td><input type="text" size="5" ng-model="filterHsCodeRestricted"></td>
<td>HS Code Restricted</td>
<td><input type="text" size="5" ng-model="filterHsCode10"></td>
<td>HS Code 10</td>
<td><input type="text" size="5" ng-model="filterCOD"></td>
<div class="filter-buttons">
<button tabindex="0" class="btn btn-default btn-xs" ng-click="applyFilters()">Apply</button>
<button class="btn btn-default btn-xs" ng-click="resetFilters()">Reset</button>

I have a "reset" button which calls a function that I want to reset all the ng-models to empty strings:

$scope.resetFilters = function () {
$scope.filterHsCodeRestricted = '';
$scope.filterHsCode10 = '';
$scope.filterCOD = '';

However, if I type something into the field and click "reset", the model is not being set to the empty string. I've done this elsewhere and it works, just not inside a popover template, so I assume it has something to do with the fields being in a popover ng-template. How do I "access" those?


The problem is that you're using the model without the DotRule or controller-as-syntax.

The whole problem was already explained by Pankaj Parkar in this question.

So, to make it work, you have to create a new object, ex:

$scope.model = {};

Then, build your ng-model's like this:


And so on..