Ion selection does not update function dependent on scope variable

Question

I have an ion flag that updates the scope variable. I also have a scope function, which is a function that depends on this scope variable (for example, it checks if this variable is a specific value). The result of the function does not seem to be updated using the ion selector, while it seems to be updated in basic angular values. Embedding the actual state instead of the function seems to work for ionic.

Ion example: http://codepen.io/anon/pen/VeOXzb

Corresponding javascript in the controller:

$scope.testValue = 'value1'; $scope.variableFunction1 = function() { return $scope.testValue === 'value2'; } 

Relevant html:

 Does not change: {{variableFunction1()}}<br/> Does change: {{testValue === 'value2'}}<br/> <div class="item item-input item-select"> <div class="input-label"> testValue </div> <select ng-model="testValue"> <option value="value1">Val1</option> <option value="value2">Val2</option> <option value="value3">Val3</option> </select> </div> 

The same angular example where it works as I expect: http://jsfiddle.net/mm5vg0oa/

Is this a mistake or am I misunderstanding something in ionic?

Answer 1

I assume that ion-content creates a new child region, which means that when you select a value in select, the new variable testValue is set in the ion-content (which is different from the controller area).

You have two options:

• Set ng-controller for the element inside ion-content .
• Use an object to store the selected value instead of a string (see the example here: http://codepen.io/anon/pen/WrBzBq ).

This page describes the problem very well: https://github.com/angular/angular.js/wiki/Understanding-Scopes