JSFiddle - React, Tailwind, and code Playground

HTML

<div  ng-app="animateApp">
		<div ng-controller="filterController">				
			<select>					
				<option ng-repeat="item in masterData|numSort:distinctGrades:'ASC'"  value="{{item}}" >
					{{item.grade}}
				</option>
			</select>
		</div>
	</div>

JavaScript

var animateAppModule = angular.module('animateApp', []);
	function filterController($scope){
		populateScope($scope, {
			sortOrder:'asc',
			masterData : [
				{
					name:"Raj",
					grade:1
				},
				{
					name:"Sai",
					grade:5
				},
				{
					name:"Suresh",
					grade:2
				},
				{
					name:"Thi",
					grade:2
				},
				{
					name:"satish",
					grade:3
				},
				{
					name:"prabha",
					grade:3
				}
			]
		})
		$scope.filteredData = [];		
	}
	
	animateAppModule.filter('numSort', function(){
		return function(inarr, b){
			//b is undefined here
			//so i cant pass the scope either
			console.log(b)
			return inarr;
		}
	})
		
		
	function populateScope(scope, obj){
		for(var k in obj){
			scope[k] = obj[k];
		}
	}