Angular Filter with | filter{datatype:object.properties} is not seeing any data when adding this filter

Question

I am used to writing custom filters and now that I been banging my head with ng-options in the dropdowns I was switching to ng-repeat within selects

Seems that when I add in a filter like this below I no longer get data

<select id="Utility" name="Utility" class="form-control" required>
    <option ng-repeat="utility in detail.utilityList | filter:{type:detail.utilityList}"  ng-value="utility.name">{{utility.name}}</option>
</select>

The detail.UtilityList has a type so I'm confused

  $scope.detail.utilityList = [{
     "name": "Commonwealth Edison Co",
     "type": "Electric",
     "$$hashKey": "object:140"
  }, {
     "name": "Nicor Gas",
     "type": "Gas"
  }, {
     "name": "Peoples Energy",
     "type": "Gas"
  }];

Here is a fiddle that shows it all

https://jsfiddle.net/e8o3ef35/

1. Do I even need to use an ng-model ? what is the purpose?
2. Can ng-options really be a better way to go?
3. Is the reason I need to use $scope, is is because i'm not using the controller as syntax?
4. I did want to use the detail.utilityType that with filter didn't work either

here is the other

 $scope.detail.utilityType = [
 {
    "type": "Gas"
 }, 
 {
    "type": "Electric"
 }];

Answer 1

Actually for what as you said in comments that you want to show first dropdown only for UtilityType and then based on selected Utility Type you want to show another dropdown having values of Utilitylist based on selected type.

Here is the code :

<div ng-controller="MyCtrl">
<div class="container-fluid">
    <form>
    <div >
        Select Utility Type
        </div>
        <select id="type" name="Type" class="form-control" required ng-model="selectedType">
            <option ng-repeat="type in detail.utilityType " ng-value="type.type">{{type.type}}</option>
        </select>
        <div ng-if="selectedType">
        Selected Type is : {{selectedType}}
        </div>
        <br>
        <div ng-if="selectedType">
        Select Utility List
        </div>
        <select id="list" name="List" class="form-control" required ng-if="selectedType" ng-model="selectedutility">
            <option ng-repeat="utility in detail.utilityList| filter:{type:selectedType}" ng-value="utility.name">{{utility.name}}</option>
        </select>

    </form>
</div>

You need to first pick up selected type from first dropdown and then apply filter on second dropdown based on selected type.