ionic framework binding showing unwanted values - ios

Question

I am using ionic framework in a hybrid app which have a page that will display the current year in the middle. There are two arrows left and right which will decrease and increase the year respectively. That module is working fine on android but when testing on ios, it shows some unwanted values prefixed to the year bindings.
The value looks fine initially but when the binding gets updated it shows something like this.
The code looks like below.
(function () {
angular.module('surprise')
.controller('calendarController', [calendarController]);
function calendarController() {
var ref = this;
ref.today = moment();
ref.year = ref.today.year();
ref.prev = ref.year -1;
ref.next = ref.year+1;
ref.isActiveMonth = function(month) {
if(month === ref.today.month()) {
return true;
}
return false;
};
ref.prevYear = function() {
ref.year -= 1;
console.log(ref.year);
};
ref.nextYear = function() {
ref.year +=1;
console.log(ref.year);
}
}
})();
The view template
<ion-view>
<ion-nav-title>
<div class="title header-text">
<i class="icon"><img src="image/create_icon4.png" class="full_width" /></i>
<span>{{'CALENDAR' | translate}}</span>
</div>
</ion-nav-title>
<ion-content>
<section class="recent_row">
<div class="cale_main">
<div class="bar bar-subheader year-select">
<a ng-click="vm.prevYear();" class="align_left"><i class="icon"><img src="image/arrow-left.png" /></i><span>{{vm.prev}}</span></a>
<h2 class="title">{{vm.year}}</h2>
<a ng-click="vm.nextYear();" class="align_right"><span>{{vm.next}}</span><i class="icon"><img src="image/arrow-right.png" /></i></a>
</div>
<div class="row">
<div class="menuview_main">
<ul>
<li>
<a ui-sref="app.calendarMonth({year:vm.year, month:01})">
<img ng-src="{{!vm.isActiveMonth(0) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/>
<h6>January</h6>
</a>
</li>
<li>
<a ui-sref="app.calendarMonth({year:vm.year, month:02})">
<img ng-src="{{!vm.isActiveMonth(1) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/>
<h6>February</h6>
</a>
</li>
<li>
<a ui-sref="app.calendarMonth({year:vm.year, month:03})">
<img ng-src="{{!vm.isActiveMonth(2) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/>
<h6>March</h6>
</a>
</li>
<li>
<a ui-sref="app.calendarMonth({year:vm.year, month:04})">
<img ng-src="{{!vm.isActiveMonth(3) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/>
<h6>April</h6>
</a>
</li>
<li>
<a ui-sref="app.calendarMonth({year:vm.year, month:05})">
<img ng-src="{{!vm.isActiveMonth(4) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/>
<h6>May</h6>
</a>
</li>
<li>
<a ui-sref="app.calendarMonth({year:vm.year, month:06})">
<img ng-src="{{!vm.isActiveMonth(5) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/>
<h6>June</h6>
</a>
</li>
<li>
<a ui-sref="app.calendarMonth({year:vm.year, month:07})">
<img ng-src="{{!vm.isActiveMonth(6) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/>
<h6>July</h6>
</a>
</li>
<li>
<a ui-sref="app.calendarMonth({year:vm.year, month:08})">
<img ng-src="{{!vm.isActiveMonth(7) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/>
<h6>August</h6>
</a>
</li>
<li>
<a ui-sref="app.calendarMonth({year:vm.year, month:09})">
<img ng-src="{{!vm.isActiveMonth(8) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/>
<h6>September</h6>
</a>
</li>
<li>
<a ui-sref="app.calendarMonth({year:vm.year, month:10})">
<img ng-src="{{!vm.isActiveMonth(9) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/>
<h6>October</h6>
</a>
</li>
<li>
<a ui-sref="app.calendarMonth({year:vm.year, month:11})">
<img ng-src="{{!vm.isActiveMonth(10) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/>
<h6>November</h6>
</a>
</li>
<li>
<a ui-sref="app.calendarMonth({year:vm.year, month:12})">
<img ng-src="{{!vm.isActiveMonth(11) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/>
<h6>December</h6>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
</ion-content>
</ion-view>
When I check it in the console the value shows fine even in iOS, so I guess this is something to do with the view update of ionic framework.

Answer 1

I solved the mystery after debugging for hours, This was caused by iOS behaviour of converting numbers into hyperlinks with telephone numbers.
The solution is to disable that using the following meta tag
<meta name="format-detection" content="telephone=no">
I hope this may save someone else's time and frusturation. More info here