title: AngularJS: Initialize nested scope variables in controller
body: <p>I like to keep my namespace of model names clean and descriptive, so I use nested model variables like this (where month and year are nested in service):</p>
  
  <pre><code>&lt;form data-ng-submit="submit()"&gt;
    &lt;select data-ng-model="service.month" data-ng-options="m for m in months"/&gt;
    &lt;input data-ng-model="service.year"/&gt; {{ service.year }}
    &lt;input type="submit"/&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And in my controller, I want to set <code>$scope.service.month</code> and <code>$scope.service.year</code> to initial values, but I get a javascript error <code>Cannot set property 'year' of undefined</code>, so I'm guessing the DOM hasn't been parsed and all the <code>$scope</code> variables haven't been created yet. How can I have some code wait to run until the DOM has been parsed by Angular and all the models have been created?</p>
  
  <p>Here's my controller:</p>
  
  <pre><code>mod.controller('AddServiceCtrl', [
      '$scope', 
      '$rootScope', 
  function($scope, $rootScope) {
    var date = new Date();
    $scope.months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    $scope.service.year = 2014;   
    $scope.submit = function(){
    };
  }])
  </code></pre>