title: Angular Material Design - Creating a new Chip with Autocomplete
body: <p>I'm using Angular Material Design. I have a field that contains an autocomplete set of terms. This list is pulled in via a api call.</p>
  
  <p>However, if the user decides to create a new title (chip), I'm using md-transform-chip="vm.transformChip($chip)".</p>
  
  <p>Now, when a new chip is found, I want to create the Job Title via a api call, then return the response and have that be the new chip.</p>
  
  <p>But, what I'm finding out, if I make the api call and in the success callback, return the chip, it's always a empty chip. If I don't make the api call and just return the new chip, it displays correctly.</p>
  
  <p>Ex. of it not working:</p>
  
  <pre><code>function transformChip(chip) {
    // If it is an object, it's already a known chip
    if (angular.isObject(chip)) {
     return chip;
    }
  
    api.jobTitles.create.save({'site_id': vm.site_id}, { name: chip },
      // Success
      function (response) {
        vm.jobTitles.push(response);
        return { name: response.name, _id: response._id}                          
      },
  
      // Error
      function (response) {
      }
    );
  }
  </code></pre>
  
  <p>Ex. pulled from Angular Material Design's site, where it does work.</p>
  
  <pre><code>function transformChip(chip) {
    // If it is an object, it's already a known chip
    if (angular.isObject(chip)) {
      return chip;
    }
  
    return { name: chip, type: 'new' }   
  }
  </code></pre>
  
  <p>My goal, is to create the new chip before the submission of the form and add the new chip to the array of jobtitles, that way, any new submission, will have the chip for the typeahead.</p>
  
  <p>Thanks for your help.</p>