title: How to bind one model to multiple inputs with Angular JS
body: <p>I have an form input which is for a MySQL date field. Ex: <code>2015-01-31</code>.</p>
  
  <p>I want to allow the user to input this using 3 different form inputs. One for the year, one for the month, and one for the day.</p>
  
  <p>Obviously ng-model isn't going to work right out of the box, because I'm trying to bind just one <em>part</em> of the date string to each input. I'm pretty sure the way to do it is bye creating three "temporary" scope vars/models </p>
  
  <pre><code>$scope.year;
  $scope.month;
  $scope.day;
  </code></pre>
  
  <p>...and then somehow combine/binding them to the actual value. </p>
  
  <pre><code>//If only it were this easy!
  $scope.date = $scope.year + "-" + $scope.month + "-" + $scope.day;
  </code></pre>
  
  <p>The line above of course won't work because the values aren't two-way-bound. If the form were only for saving new data, I could could get away with that by just combining the inputs on submit. But I need it to handle/show existing data also. And it's going to get super ugly if I can't figure out a way to wrangle Angular's binding magic to do what I want.</p>
  
  <p>I found <a href="https://stackoverflow.com/questions/25141773/angularjs-bind-one-ng-model-to-directive-with-two-inputs">this question</a> which I think is trying to do the same thing, but they solve it with a custom directive, which is something I'm hoping to avoid. I know this may be a more maintainable/portable/modular way to do it, but I'm new to Angular and a bit intimidated by that. Also, the inputs are using the lovely <a href="https://github.com/machineboy2045/angular-selectize" rel="nofollow noreferrer">angular-selectize</a> directive, which adds an additional layer of complexity to that approach.</p>