Create dropdown list with json data

Question

I would like to retrieve the name and description fields from the below json data and then append it to the page. At the moment I'd be ok to just be able to see the info. This is what I've tried and it's not working. I'm sure it's nowhere near correct but I'd like a push in the right direction.

mainApp.controller('drpdwnCtrl',['$scope','$http' , function ( $scope, $http) {
  // $scope.ChoreList = null;
  //Declaring the function to load data from database
  $scope.fillChoreList = function () {
      $http({
          method: 'GET',
          url: 'https://tiy-homeshare.herokuapp.com/homes/26/completed_chores', // Travis'
          // data: $scope.ChoreList,
          headers: {Authorization: JSON.parse(localStorage.getItem( "user_token")) }
      }).success(function (result) {
          $scope.completeChoreList = result.chores.completed;
          console.log($scope.completeChoreList);
      });
  };
  // Calling the function to load the data on pageload
  $scope.fillChoreList();
}]); // end drpdwnCtrl

{
  "chores": {
    "completed": [
      {
        "id": 61,
        "chore_creator_id": 97,
        "home_id": 26,
        "name": "empty",
        "description": "trash",
        "bill_value": null,
        "votes": null,
        "thumbs_up": null,
        "created_at": "2016-07-31T20:43:06.013Z",
        "completed_at": "2016-07-31T20:46:31.604Z",
        "chore_completer_id": 97,
        "chore_assignee_id": null,
        "avatar": null,
        "chore_xp": 40,
        "completed": true
      },

  <div ng-controller="drpdwnCtrl">
      <select ng-options="chores in completeChoreList" ng-model="selectedChores" >
          <option value="" label="Select a chore"></option>
      </select>
  </div>

Answer 1

Supposing that you're retrieving that JSON correctly in your $http request, you just have to correct your construction of ngOptions. It should be like this:

<select ng-options="chores.name + ' ' + chores.description for chores in completeChoreList" ng-model="selectedChores">
  <option value="" label="Select a chore"></option>
</select>

Full code:

(function() {
  angular
    .module('app', [])
    .controller('drpdwnCtrl', drpdwnCtrl);

  drpdwnCtrl.$inject = ['$scope'];

  function drpdwnCtrl($scope) {
    var data = {  
       "chores":{  
          "completed":[  
             {  
                "id":61,
                "chore_creator_id":97,
                "home_id":26,
                "name":"empty",
                "description":"trash",
                "bill_value":null,
                "votes":null,
                "thumbs_up":null,
                "created_at":"2016-07-31T20:43:06.013Z",
                "completed_at":"2016-07-31T20:46:31.604Z",
                "chore_completer_id":97,
                "chore_assignee_id":null,
                "avatar":null,
                "chore_xp":40,
                "completed":true
             },
             {  
                "id":60,
                "chore_creator_id":97,
                "home_id":26,
                "name":"clean",
                "description":"bathroom",
                "bill_value":null,
                "votes":null,
                "thumbs_up":null,
                "created_at":"2016-07-31T20:42:59.097Z",
                "completed_at":"2016-07-31T20:46:33.943Z",
                "chore_completer_id":97,
                "chore_assignee_id":null,
                "avatar":null,
                "chore_xp":90,
                "completed":true
             },
             {  
                "id":59,
                "chore_creator_id":97,
                "home_id":26,
                "name":"sweep",
                "description":"house",
                "bill_value":null,
                "votes":null,
                "thumbs_up":null,
                "created_at":"2016-07-31T20:42:50.982Z",
                "completed_at":"2016-07-31T20:48:54.927Z",
                "chore_completer_id":97,
                "chore_assignee_id":null,
                "avatar":null,
                "chore_xp":50,
                "completed":true
             }
          ]
       }
    };  

    $scope.completeChoreList = data.chores.completed;
  }
})();

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>

<body>
  <div ng-controller="drpdwnCtrl">
    <select ng-options="chores.name + ' ' + chores.description for chores in completeChoreList" ng-model="selectedChores">
      <option value="" label="Select a chore"></option>
    </select>
  </div>
</body>

</html>