How to set a default value in ui-select in angular?

Question

I wrote a little program in Angular using ui-select elements. Here is the html code :

  <ui-select ng-model="test.selectedContract">
    <ui-select-match >
      {{$select.selected.name}} - {{$select.selected.value}} ---- {{$select.selected.id.id}} *** {{$select.selected.policy.info.name }}    
    </ui-select-match>

    <ui-select-choices group-by="groupByLetter" 
    repeat="contract in (contracts |
    orSearchFilter: {id.id: $select.search, policy.info.name : $select.search} |
    orderBy: 'name') track by contract.name">
          {{contract.name}} - {{contract.value}} ---- {{contract.id.id}} *** {{contract.policy.info.name }}
    </ui-select-choices>
  </ui-select>

And here is the structure of my contracts object :

    $scope.contracts = [{
      name: "contract1.00",
      value: 10,
      id: {
        id: 8000,
        code: 2
      },
      policy: {
        info: {
          name: "test1",
          country: "test"
        }
      }
    }, //other contract objects

Finally, there is my plunker code : http://plnkr.co/edit/PigjGCj5ukxscJC7Wl97?p=preview

The problem is that I want to display "All" as a default value (if there is no selection) while my default value in my plunker is : " - ---- *** "

Can you please help me to set this default value please? Thanks !

Answer 1

You could define a sort of toString function in your controller and put the result of that in the ui-select tag, instead of hard-code dashes and stars. If value is null, it should return "All"

Answer 2

Just set the

   $scope.test.selectedContract = {
      name: "all",
      value: 10,
      id: {
        id: 8000,
        code: 2
      },
      policy: {
        info: {
          name: "test1",
          country: "test"
        }
      }
    } 

DEMO