How to use $filter with select in angular.js

Question

How can I toggle between diffrent filters based on the values selected by the user? I have three filters ('largeNumber', 'Percentage', 'Bytes') and I want to toggle between these filters based on the value selected by the user. Right now I am using filter from my js code see fiddle however it does not work as expected jsfiddle:

expected output

when the user types in 1200 and selected Large Numbers ==> 1k

view

<div ng-controller="MyCtrl">
  <form role="form" class="form-inline">
  <div class="form-group">
    <input type="text" class="form-control" id="sample" ng-model="numberData" placeholder="Enter Number">
                 <select class="form-control inline" id="format" ng-model="numberType"
                  ng-options='type for type in selectType' ng-change="selected()">
                  <option style="display:none" value="" class='formOptions'>select a type</option>
                </select>
  </div>

</form>
 <h1> data here: {{numberData}}</h1>
</div>

Js code:

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

myApp.filter('largeNumber', function(){
    return function(number, decPlaces) {
    var orig = number;
    var dec = decPlaces;
    // 2 decimal places => 100, 3 => 1000, etc
    decPlaces = Math.pow(10, decPlaces);

    // Enumerate number abbreviations
    var abbrev = ["k", "m", "b", "t"];

    // Go through the array backwards, so we do the largest first
    for (var i = abbrev.length - 1; i >= 0; i--) {

        // Convert array index to "1000", "1000000", etc
        var size = Math.pow(10, (i + 1) * 3);

        // If the number is bigger or equal do the abbreviation
        if(size <= Math.abs(Math.round(number))) {
            // Here, we multiply by decPlaces, round, and then divide by decPlaces.
            // This gives us nice rounding to a particular decimal place.
            var number = Math.round(number * decPlaces / size) / decPlaces;

            // Handle special case where we round up to the next abbreviation
            if((number == 1000) && (i < abbrev.length - 1)) {
                number = 1;
                i++;
            }

            // console.log(number);
            // Add the letter for the abbreviation
            number += abbrev[i];

            // We are done... stop
            break;
        }
    }

    return number;
}

  })


function MyCtrl($scope, $filter) {
      $scope.selectType = ['Large Number', 'Percentage', 'Bytes']

  $scope.selected = function() {
  console.log($scope.numberType)
     return $scope.numberType

     };

  $scope.selectedType = $scope.selected()

 $scope.sendSelectedItem = function(){
   if($scope.selectedType == "Large Number"){
    return $filter('largeNumber')(0)
  }

 }
}

Answer 1

HTML changes:

<h1> data here: {{numberDataFormatted}} </h1>

Script Changes: The following code is all you need in the controller.

$scope.selectType = ['Large Number', 'Percentage', 'Bytes'];

$scope.sendSelectedItem = function() {
  if ($scope.numberType == "Large Number") {
    return $filter('largeNumber')($scope.numberData, 0);
  }
  // Handle other types or defaults here
}

$scope.selected = function() {
  $scope.numberDataFormatted = $scope.sendSelectedItem();
};

// Set the initial type
$scope.numberType = "Large Number";

Problems with your code:

1. $scope.sendSelectedItem is defined but not invoked. That should have been invoked when an item is selected and on selection, you can apply the required filter and assign the result to another scope model variable.

2. $scope.numberData is an unformatted value. If you assign it to the h1 tag without applying a filter, it will just display the value entered in the input field.

Hope this helps.