<span> Text updates based on <select> option - angularjs

Question

I've the following <select> element:
<select ng-model="pTitle">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
</select>
When an option is selected, I'm changing text like so.
<section>
Greetings, <span ng-bind="pTitle"></span> Jones!
</section>
This works great. Now what I'd like to do is change other text based on the ng-bind change.
For example, in the <section> below, based on their choice I'd switch between his and her:
<section>
According to <span ng-bind="pTitle"></span> Jones, his **(or her)** coding ability needs some work!
</section>
What's the proper way to get this done? Thanks in advance.

Answer 1

You could use a custom filter that transforms the selected value to the wanted pronoum.
Like:
angular.module('myApp').filter('possessivePronoum', function() {
return function(title) {
return title === 'Mr.' ? 'his' : 'her';
};
});
And use it like this:
<section>
According to <span ng-bind="pTitle"></span> Jones, <span ng-bind="pTitle | possessivePronoum"></span> coding ability needs some work!
</section>
Warning: untested code

Answer 2

You can use ng-if
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<select ng-model="pTitle">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
</select>
<section>
According to <span ng-bind="pTitle"></span> Jones, <span ng-if="pTitle=='Mr.'">His</span><span ng-if="pTitle=='Mrs.'||pTitle=='Ms.'">Her</span> coding ability needs some work!
</section>
</div>
Update: Angular 1.1.5 added a ternary operator, so now we can simply write
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<select ng-model="pTitle">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
</select>
<section>
According to <span ng-bind="pTitle"></span> Jones, {{ pTitle == 'Mr.' ? 'His' : 'Her' }} coding ability needs some work!
</section>
</div>
or in previous versions
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<div ng-app>
<select ng-model="pTitle">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
</select>
<section>
According to <span ng-bind="pTitle"></span> Jones, {{ pTitle == 'Mr.' && 'His' || 'Her' }} coding ability needs some work!
</section>
</div>