title: angularjs dropdown menu: populate two input fields with different information from one option
body: <p>I am brand new to AngularJS. I'm wanting to select an option from the dropdown <strong>RegistrationType</strong> and want that selection to determine what populates its own input <strong>AND</strong> input <strong>RegAmount</strong>. 
  So, I select the first option, $155.00 Two Day and "$155.00" would show up in the <strong>RegAmount</strong> input and "Two Day" should show up in the <strong>RegistrationType</strong> input.
  I have failed multiple times, so far, over the last two days.  Any advice is appreciated. One thing I tried was adding a name/id to the option and trying to tie that to <strong>RegAmount</strong>, but I wasn't able to separate the information.
  I also tried a ng-if by duplicating the <strong>RegAmount</strong> div to show "$155.00" if the first option was selected, and ng-if if it wasn't selected, to show "$95.00". Couldn't get that to work either. Oh, and NO, <strong>RegAmount</strong> should not be an input of course, but I just hadn't changed it yet.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function ContactController($scope) {
  
    $scope.changeme = function() {
  
    }
  
    var uid = 1;
  
    $scope.contacts = [{
      id: 0,
      'regType': '5555',
      'RegistrationType': '5555'
    }];
  
    $scope.saveContact = function() {
  
      if ($scope.newcontact.id == null) {
        $scope.newcontact.id = uid++;
        $scope.contacts.push($scope.newcontact);
      } else {
  
        for (var i in $scope.contacts) {
          if ($scope.contacts[i].id == $scope.newcontact.id) {
            $scope.contacts[i] = $scope.newcontact;
          }
        }
      }
      $scope.newcontact = {};
    }
  
    $scope.delete = function(id) {
  
      for (var i in $scope.contacts) {
        if ($scope.contacts[i].id == id) {
          $scope.contacts.splice(i, 1);
          $scope.newcontact = {};
        }
      }
    }
  
    $scope.edit = function(id) {
      for (i in $scope.contacts) {
        if ($scope.contacts[i].id == id) {
          $scope.newcontact = angular.copy($scope.contacts[i]);
        }
      }
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"&gt;&lt;/script&gt;
  &lt;div ng-app="" ng-controller="ContactController"&gt;
    &lt;form class="well"&gt;
      &lt;div&gt;
        &lt;label&gt;Registration Type&lt;/label&gt;
        &lt;select name="RegistrationType" ng-model="newcontact.RegistrationType"&gt;
          &lt;option value = ""&gt;-- Select an Option --&lt;/option&gt;
          &lt;option value = "Two Day"&gt;$155.00 Two Day&lt;/option&gt;
          &lt;option value = "First Day"&gt;$95.00 First Day&lt;/option&gt;
          &lt;option value = "Second Day"&gt;$95.00 Second Day&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
        &lt;label&gt;Registration Amount&lt;/label&gt;
  
        &lt;input type="text" name="Registration Amount" ng-model="newcontact.RegAmount" /&gt;
  
      &lt;/div&gt;
  
      &lt;br&gt;
      &lt;div&gt;
  
        &lt;input type="hidden" ng-model="newcontact.id" /&gt;
        &lt;input id="buttonSave" type="button" value="Save" ng-click="saveContact()" class="btn btn-primary" /&gt;
        &lt;p style="clear: both;"&gt;&lt;/p&gt;
  
      &lt;/div&gt;
    &lt;/form&gt;
  
    &lt;br/&gt;
    &lt;br/&gt;
  
    &lt;table&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Registration Type&lt;/th&gt;
          &lt;th&gt;Registration Amount&lt;/th&gt;
          &lt;th&gt;Edit | Delete&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
  
      &lt;tbody&gt;
        &lt;tr ng-repeat="contact in contacts"&gt;
          &lt;td&gt;{{ contact.RegistrationType }}&lt;/td&gt;
          &lt;td&gt;{{ contact.RegAmount }}&lt;/td&gt;
  
  
          &lt;td&gt;
            &lt;a href="#" ng-click="edit(contact.id)"&gt;edit&lt;/a&gt; |
            &lt;a href="#" ng-click="delete(contact.id)"&gt;delete&lt;/a&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>