Mathematical operations on ng init

Question

I am trying to do mathematical operations of ng init

    <div "dt in data">
     <input type="text" ng-model="dt.in" ng-init="'aaa' + $index + 1">
    </div>

Out put in the format of aaa1

But it does not work.

Answer 1

As the docs states,

The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.

This is not what you're doing. What ngInit actually does is to init a variable that will be available inside the scope of a ngRepeat. You are not even creating a variable (I mean, putting something like myVar = someValue), you are just performing a calculation.

So, I think you should abandon ngInit and instead create a function in your $scope, like:

$scope.myFunc = function(index) {
  return 'aaa' + (index + 1);
}

And use it like:

<input type="text" ng-bind="myFunc($index)">

Edit: I'm not actually sure that the ng-bind is exactly what you want, specially considering that you are using it with a <input>. I've just used ng-bind as an example, you should use whatever you consider more appropriate.

Answer 2

If you want to see calculated value in textbox you need to change to

ng-init="dt.in='aaa' + $index + 1"

var app = angular.module('app', []);

app.controller('fCtrl', function($scope) {

  $scope.data = [

    { in : 1
    }, { in : 2
    }
  ]

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="fCtrl">

    <div ng-repeat="dt in data">
      <input type="text" ng-model="dt.in" ng-init="dt.in='aaa' + $index + 1">
    </div>

  </div>
</div>