<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@1.3.8" data-semver="1.3.8" src="https://code.angularjs.org/1.3.8/angular.js"></script>
    <script data-require="angular-translate@*" data-semver="2.5.0" src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.5.0/angular-translate.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="translateController">
      <h2>{{'ER102;input abc;10' | translateWithParam  }}</h2>
      <h2>{{'ER101;input abc;10;20' | translateWithParam  }}</h2>
      <h2>{{'ER100' | translateWithParam  }}</h2>
     
     
     
    </div>
  </body>

</html>
var app = angular.module("myApp", ['pascalprecht.translate']);

app.config(["$translateProvider", function($translateProvider) {

  var en_translations = {
    "ER100": "This field is mandatory",
    "ER101": "Value must be in range [{0}, {1}]",
    "ER102": "Value must be greater than {0}",

  }

  $translateProvider.translations('en', en_translations);

  $translateProvider.preferredLanguage('en');

}]);

app.controller("translateController", ["$scope", "$translate", function($scope, $translate) {

}]);

app.filter('translateWithParam', function($translate) {

  function addParasToResult(result, params) {
    if (params) {
      for (var i = params.length - 1; i >= 0; i--) {
        result = result.replace("{" + i + "}", params[i]);
      }
      return result;
    } else return result;
  }


  return function(input) {
    if (input && input.includes(";")) {

      var array = input.split(";");
      console.log("array", array)
      var message = array.splice(0, 2)[0];
      var params = array;

      console.log("message", message);
      console.log("params", params)
      var temp = $translate.instant(message);
      return addParasToResult(temp, params);

    }
    return $translate.instant(input)
  }

});
/* Styles go here */