title: Create dropdown from one-to-many relationship with AngularJS and Web API
body: <p>I have 2 tables in my database: People and Payband. I'll give a reduced version of the relationship below:</p>
  
  <p><strong>dbo.People</strong></p>
  
  <pre><code>PersonId : int (PK)
  FirstName : string
  MiddleInitial: string
  LastName : string
  DateOfBirth: datetime
  PaybandId : int (FK)
  </code></pre>
  
  <p><strong>dbo.Paybands</strong></p>
  
  <pre><code>Id : int (PK)
  Name : string
  </code></pre>
  
  <p>So I've created an ASP.NET Web API service for my backend and using HTML/CSS and AngularJS for my front-end. I'm able to pull, display and edit data no problem. Here's an image of what my form looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/ct9zx.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ct9zx.jpg" alt="enter image description here"></a></p>
  
  <p>I'm able to get the current Payband value that's assigned to a person, the only problem is that I'm unable to get all the other Payband values and display them in the HTML dropdown so that you can easily change the payband for any given person. I'm at a loss for how to achieve what I'm trying to do, so if someone can help me with this, I'd really appreciate it. Thank you in advance and if you have any other questions, please ask away.</p>
  
  <p>Also, here's my AngularJS controller (yes, I'm currently hardcoding the Id of the person for testing):</p>
  
  <pre><code>angular
  .module("personnelService")
  .controller("PersonnelEditCtrl",
               PersonnelEditCtrl);
  
  function PersonnelEditCtrl(personnelResource) {
  var vm = this;
  vm.person = {};
  vm.message = '';
  
  personnelResource.get({ id: 2 },
      function (data) {
          vm.person = data;
          vm.person.dob = new Date(vm.person.dob);
          vm.originalPerson = angular.copy(data);
      });
  
  if (vm.person &amp;&amp; vm.person.personId) {
      vm.title = "Edit: " + vm.person.firstName + " " + vm.person.lastName;
  }
  else {
      vm.title = "New Person";
  }
  
  vm.submit = function () {
      vm.message = '';
      if (vm.person.personId) {
          vm.person.$update({ id: vm.person.personId },
              function (data) {
                  vm.message = '... Save Complete';
              })
      }
      else {
          vm.person.$save(
              function (data) {
                  vm.originalPerson = angular.copy(data);
                  vm.message = '... Save Complete';
              })
      }
  };
  
  vm.cancel = function (editForm) {
      editForm.$setPristine();
      vm.person = angular.copy(vm.originalPerson);
      vm.message = "";
  };
  </code></pre>
  
  <p>}</p>