ionic select does not update function dependent on scope variable

Question

I have a ionic select box which updates a scope variable. I also have a scope function which is a function which is dependent on that scope variable (eg. it tests if it the variable is a specific value). The result of the function does not seem to update with the ionic select box, while it does seem to update in basic angularJs. Embedding the actual condition instead of the function seems to work for ionic.

The ionic example: http://codepen.io/anon/pen/VeOXzb

Relevant javascript in 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 bug or am I misunderstanding something in ionic?

Answer 1

My guess is that ion-content creates a new child scope, which means that when you select a value in the select, a new testValue variable is set on the ion-content scope (which is different from the controller scope).

You have two options:

1. Set the ng-controller on an element inside the ion-content.
2. Use an object to hold the selected value, instead of a string (See example here: http://codepen.io/anon/pen/WrBzBq).

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