Hi everybody,

We have a directive with the following template (portion of the template):

<div class="col-xs-5 pull-left">
        <div class="form-group">
            <label class="control-label">{{unassignedItemsTitle}}</label>
            <div>
                <select class="select-list" multiple
                        ng-model="unassigned"
                        name="unAssignedList"
                        data-no-dirty-check
                        ng-options="unassignedItem.descrip for unassignedItem in unassignedItems | orderBy:'descrip' | filter: filterCriteria"></select>
            </div>
        </div>
    </div>

Please note the filter here.

On my form I'm using this directive like this:

<div class="form-group">
            <div class="col-md-3">
                <label title="@Labels.department" class="control-label">@Labels.department:</label>
            </div>
            <div class="col-md-6 col-lg-6">
                <select class="form-control" ng-model="selectedDeptId" no-dirty-check
                        ng-options="d.departmeId as d.descrip for d in metaData.allDepartments">
                    <option value="">@String.Format(Labels.selectX, Labels.department)</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-3">
                <label title="@Labels.category" class="control-label">@Labels.category:</label>
            </div>
            <div class="col-md-6 col-lg-6">
                <select class="form-control" ng-model="selectedCategoryId"
                        ng-disabled="!selectedDeptId" no-dirty-check
                        ng-options="c.categoryId as c.descrip for c in metaData.allCategories |filter:{departmeId:selectedDeptId}">
                    <option value="">@String.Format(Labels.selectX, Labels.category)</option>
                </select>
            </div>
        </div>
        
        <div class="form-group padd">

            <data-sm:duallist-directive ng-required="false" keep-pristine="true"
                                        unassigned-items-title="'@String.Format(Labels.availableX, Labels.items)'"
                                        unassigned-items="currentBenefit.unassignedItems"
                                        assigned-items-title="'@String.Format(Labels.assignedX, Labels.items)'"
                                        assigned-items="currentBenefit.assignedItems"
                                        sortable="false"
                                        filter-criteria="{categoryId:selectedCategoryId}"
                                        selected-item="currentBenefit.selectedItem">
            </data-sm:duallist-directive>
            
        </div>

The code for the directive is: (only relevant code shown here)

restrict: 'E',
            templateUrl: 'app/templates/smDuallist',
            require: ['^form'],
            scope: {
                assignedItems: '=assignedItems',
                unassignedItems: '=unassignedItems',
                assignedItemsTitle: '=',
                unassignedItemsTitle: '=',
                filterCriteria: '=',
                sortable: '=sortable',
                selectedItem: '=?',
                keepPristine: '=?'
            },
            link: function (scope, element, attrs, ctrls) {
                scope.form = ctrls[0];
                if (!scope.keepPristine)
                    scope.keepPristine = false;                
            }

Now the strange thing - the filter works correctly in 99%. But for some strange reason it doesn't work when I select department Tickets and category 'Adult Tickets'. It shows more items with the categoryId not matching the selected category Id. (Although it doesn't seem to show all items, only some of them, but definitely more than for that particular category)

However, it works OK when I select, for example, Tickets / Senior Tickets.

So, I am unable to figure out why it works in many cases but not for this combination (departmentID = 22 and categoryId = 8). The same problem exists in 2 forms where I use a similar markup.

Do you know what may be wrong here and how can I figure out this problem? Attached is the screen shot of the problem.

Also, I am not sure how to figure out the zoom: reset problem. I searched for 'zoom' and for 'reset' in our application but didn't find anything relevant (I think).

Thanks in advance.