How Can I Sort the [Array] Value Elements in Angularjs?

I am using MEAN stack in my application with AngularJS as my front-end. How can I filter the count and quality fields,My Plunker For example:- In the Count drop down list is yarn count , carn count ,burn count.. if I select the yarn count that particular transaction only need to display....Please look at my plunker and help us.My Plunker

How I should customize My JSON to work with the array inside an array (or) How I should make ng-repeat inside ng-repeat to achieve above given scenario.

My Html :-

<div class="col-md-6 form-group form-group-default"> 
   <label>Count</label> 
     <select data-ng-model="searchtable.count" id="count" ng-options="item.colorshades[0].count for item in sryarnorders" class="form-control">
         <option value="">All</option>
         </select>
    </div>

And

<div class="col-md-6 form-group form-group-default">
  <label>Quality</label>
     <select data-ng-model="searchtable.quality" id="quality" ng-options="item.colorshades[0].quality for item in sryarnorders" class="form-control"  >
        <option value="">All</option>
      </select>
    </div>

My data-ng-model:-

 data-ng-model="searchtable.count"

And

 data-ng-model="searchtable.quality"

My Filter code:-

filter:searchtable.count.colorshades[0].count

filter:searchtable.quality.colorshades[0].quality

My Data:-

    $scope.sryarnorders = [
   {
"_id": "579ef3adba3bac040b583b4f",
"user": {
"_id": "57400c32bd07906c1308e2cf",
"displayName": "mani selvam"
},
"__v": 1,
"colorshades": [
{
"_id": "579ef3feba3bac040b583b51",
"quality": "Home Textiles",
"count": "carn count"
},

{
"_id": "579ef3feba3bac040b583b50",
"quality": "Hall Textiles",
"count": "yarn count"
}
],
"created": "2016-08-01T07:01:01.181Z",
"ex_india_date": "2016-08-08",
"supplier_name": "Msd",
"buyer_name": "Mani selvam .R"
},
{
"_id": "5768e6c8bdbc5db509f0f2b2",
"user": {
"_id": "57400c32bd07906c1308e2cf",
"displayName": "mani selvam"
},
"__v": 1,
"colorshades": [
{
"_id": "5768e6fcbdbc5db509f0f2b3",
"quality": "Hall Textiles",
"count": "carn count"
}
],
"created": "2016-06-21T07:03:36.504Z",
"ex_india_date": "2016-06-22",
"supplier_name": "Msd",
"buyer_name": "Rohit"
},

{
"_id": "5767cd78f5012d790aa41a7b",
"user": {
"_id": "57400c32bd07906c1308e2cf",
"displayName": "mani selvam"
},
"__v": 3,
"colorshades": [
{
"_id": "5767ce37f5012d790aa41a7c",
"quality": "yarn quality",
"count": "burn count"
}
],
"created": "2016-06-20T11:03:20.382Z",
"ex_india_date": "2016-06-21",
"supplier_name": "Mani selvam",
"buyer_name": "ms"
}

I have created Plunker for reference:- My Plunker

Solution

The select model always returns the full object in the array, not what you set as value. For example, when selecting "yarn count" in your plunker, searchtable.count equals to

{"_id":"573d7fa0760ba711126d7de5","user":{"_id":"5721a378d33c0d6b0bb30416","displayName":"ms ms"},"__v":1,"colorshades":[{"_id":"573d7fc3760ba711126d7de6","quality":"Home Textiles","count":"yarn count"},{"_id":"579ef3feba3bac040b583b50","color":"56a5b6831746bc1c0b391c7c","quality":"Hall Textiles","count":"carn count"}],"created":"2016-05-19T08:56:00.997Z","actual_delivery_date":"2016-05-19","ex_india_date":"2016-05-19","ex_factory_date":"2016-05-19","po_delivery_date":"2016-05-19","supplier_name":"Fsa","buyer_name":"e21"}

Given this, there are two solutions:

1. Filter accordingly

Filter like that:

| filter:searchtable.count.colorshades[0].count | filter:searchtable.quality.colorshades[0].quality

Which doesn't look clean.

2. Changing Options

You can also change the ng-options like this:

item.colorshades[0].count as item.colorshades[0].count for item in sryarnorders

Which will make ng-model return only item.colorshades[0].count. You will still have to adjust the filter:

| filter:searchtable.count | filter:searchtable.quality

It might be possible to make that cleaner, I am going to have to look into that.