ng-select set selected option with ng-repeat

Question

I can't get the select box to show that an option is selected even though it seems like it should be. I have an array of objects and I have a property for each showing as true or false.

<div ng-controller="testCtrl">
 <table class="table table-striped table-bordered table-hover">
   <tr ng-repeat="(key, data) in activePlans.details">
     <td>{{ data.name }}</td>
       <td class=""> {{ data.id }}
         <select  ng-model="program" ng-change="">
            <option ng-repeat="program in data.programs" ng-selected="{{ program.selected == true }}" selected=""  
              value="{{ program.product_id }}">{{ program.name }}</option>
         </select>
      </td>
    </tr>
  </table> 
</div>

And the JavaScript:

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

app.controller('testCtrl', ['$scope', function($scope) {

  console.log('sdfsdf');
  $scope.activePlans = {};
  $scope.activePlans.details = {
    "1": {
      "id": 1,
      "name": "breakfast",
      "product_id": 1,
      "programs": [{
        "product_id": 1,
        "name": "AA Plan",
        "selected": true,
        "selectedOption": 1
      }, {
        "product_id": 3,
        "name": "SS Plan",
        "selected": false,
        "selectedOption": 0
      }, {
        "product_id": 4,
        "name": "PP Plan",
        "selected": false,
        "selectedOption": 0
      }]

    },
    "2": {
      "id": 2,
      "name": "lunch",
      "product_id": 3,
      "programs": [{
        "product_id": 1,
        "name": "AA Plan",
        "selected": false,
        "selectedOption": 0
      }, {
        "product_id": 3,
        "name": "SS Plan",
        "selected": true,
        "selectedOption": 1
      }, {
        "product_id": 4,
        "name": "PP Plan",
        "selected": false,
        "selectedOption": 0
      }]
    },
    "3": {
      "id": 3,
      "name": "dinner",
      "product_id": 4,
      "programs": [{
        "product_id": 1,
        "name": "AA Plan",
        "selected": false,
        "selectedOption": 0
      }, {
        "product_id": 3,
        "name": "SS Plan",
        "selected": false,
        "selectedOption": 0
      }, {
        "product_id": 4,
        "name": "PP Plan",
        "selected": true,
        "selectedOption": 1
      }]
    },
    "4": {
      "id": 4,
      "name": "4th meal",
      "product_id": 5,
      "programs": [{
        "product_id": 1,
        "name": "AA",
        "selected": false,
        "selectedOption": 0
      }, {
        "product_id": 3,
        "name": "SS Plan",
        "selected": false,
        "selectedOption": 0
      }, {
        "product_id": 4,
        "name": "PP Plan",
        "selected": false,
        "selectedOption": 0
      }]
    }
  }
  console.log($scope.activePlans.details);

}]);

Here is the Fiddle

Answer 1

Update your <option> tag as below :

<option ng-repeat="program in data.programs" ng-selected="program.selected == true" value="{{ program.product_id }}">{{ program.name }}</option>

Updated Fiddle