AngularJS 1.4

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdn.rawgit.com/angular-ui/bootstrap-bower/0.13.4/ui-bootstrap-tpls.js"></script>
<div ng-app='myApp'>
  <div ng-controller="Ctrl1 as c1">
      <input ng-model="c1.Bands.favorite" placeholder="Favorite band?">
  </div>
  <div ng-controller="Ctrl2 as c2">
      <input ng-model="c2.Bands.favorite" placeholder="Favorite band?">
  </div>
  <hr>
  <div ng-controller="Ctrl3 as c3">
      <div>This one doesn't access the property "correctly"</div>
      <input ng-model="c3.favoriteBand" placeholder="Favorite band?">
  </div>
</div>

JavaScript

var app = angular
        .module('myApp', ['ui.bootstrap']);  

app.factory('Bands', function($http) {
    return {
        favorite: 'Led Zep'
    };    
});

app.controller('Ctrl1', function Ctrl1(Bands){
    this.Bands = Bands;
});
app.controller('Ctrl2', function Ctrl2(Bands){
    this.Bands = Bands;
});
app.controller('Ctrl3', function Ctrl3(Bands){
    this.favoriteBand = Bands.favorite;
});