Add a number to each letter in a string

Question

In my code, I would like to add a number to each letter in a string according to the position of a letter in a string. What I would like the output to be for a string like "someString" is s1o2m3e4S5t6r7i8n9g10 and now I am getting someString10.

JSfiddle here: https://jsfiddle.net/tq0p6y74/

This is my HTML:

<div ng-controller="mainController">
  <div>
    <label>Your string?
    </label>
    <input type="text" ng-model="someString" />
  </div>
  <!--this calls the function and a variable-->
  <h3>twitter.com/{{ lowercase() }}</h3>
  <h3>twitter.com/{{ uppercase() }}</h3>
  <h3>twitter.com/{{ string }}</h3>
  <h3>twitter.com/{{ addNumToEachLetter() }}</h3>
</div>

And this is the controller:

myApp.controller('mainController', ['$scope', '$filter', function($scope, $filter) {
  $scope.someString = '';
  $scope.uppercase = function() {
    return $filter('uppercase')($scope.someString);
  };
  $scope.lowercase = function() {
    return $filter('lowercase')($scope.someString);
  };
  $scope.addNumToEachLetter = function() {
    var numbered = $scope.someString + ($scope.someString.length);
    if ($scope.handle.length == 0)
      return '';
    else
      return numbered;
  };
}]);

Answer 1

Simply use Angular expressions, like so:

<div ng-controller="mainController"> 
        <div> 
            <label>Your string?
            </label> 
            <input type="text" ng-model="someString"/> 
        </div> <!--this calls the function and a variable--> 
        <h3>twitter.com/{{ someString | lowercase }}</h3> 
        <h3>twitter.com/{{ someString | uppercase }}</h3>
        <h3>twitter.com/{{ string }}</h3>  
        <h3>twitter.com/{{ someString }}{{ someString.length ? someString.length : '' }}</h3> 
    </div>

You don't have to call functions inside your controller for this type of expression interpolations.

Answer 2

Create your own filter:

myApp.filter('addNumToEachLetter', function(){
      return function(str){
        return str.split('').map(function(c, index){ return c + (index+1)}).join('');
      }
    })

myApp.controller('mainController', ['$scope', '$filter', function($scope, $filter){ 
    $scope.someString = '';
    $scope.uppercase = function(){ 
        return $filter('uppercase')($scope.someString); 
    }, 
    $scope.lowercase = function(){ 
        return $filter('lowercase')($scope.someString); 
    },
    $scope.addNumToEachLetter = function(){ 
        return $filter('addNumToEachLetter')($scope.someString); 
    }
}]);