title: AngularJS ui-router not working for child state
body: <p>I'm trying to get a child state working properly. </p>
  
  <p>Each of these states shows up fine, when I test the corresponding urls. But there's one problem... </p>
  
  <pre><code>app.config(['$stateProvider', function($stateProvider) {
    $stateProvider.state('root', { // works 100%
      url: '/',
      controller: function($scope) {
        alert("state: root");
      },
      templateUrl: 'root.html'
    })
    .state('program', {  // works 100%
      url: '/program',
      controller: function($scope) {
        alert("state: program");
      },
      templateUrl: 'program.html'
    })
    .state('program.new', {  // works only sorta!
      url: '/new',
      controller: function($scope) {
        alert("state: program.new");
      },
      templateUrl: 'program.new.html'
    });
  }]);
  </code></pre>
  
  <p>...For program.new, <strong><em>the correct state is being chosen</em></strong> (I'm logging transitions in the debugger using this: <a href="https://stackoverflow.com/a/20786262/2308190">https://stackoverflow.com/a/20786262/2308190</a> ), but only the alert("state: program") fires, not the alert("state: program.new"). Plus, the program.html template shows up, instead of the program.new.html template.</p>
  
  <p>Doesn't the controller of a child state get a chance to run? And why doesn't the child's template show up?</p>
  
  <p>To be clear, Angular <strong><em>is</em></strong> figuring out the proper state, program.new. It just doesn't seem to run the controller or render the template.</p>