Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="https://cdn.firebase.com/js/client/1.0.17/firebase.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.7.1/angularfire.min.js"></script>
<!-- Page1 -->
<div ng-controller="myCtrl1">
    <div>This is page 1</div>
    <div>Hello, {{thingsListA.thing1}}!</div>
    <input type="text" ng-model="thingsListA.thing1"/>
    <button ng-click="thingsListA.$save()">Save</button>

    <div my-things="test1"></div>
</div>
<br><br><br>
<!-- Page 2 -->
<div ng-controller="myCtrl2">
    <div>This is page 2</div>
    <div>Something interesting: {{foo}}</div>
    <div my-things="test1"></div>
    <div my-things="test2"></div>
</div>

JavaScript

angular.module('myApp',['firebase'])
	.factory('myModel', function ($q, $firebase) {
		var fbRef = $firebase(new Firebase("https://mofv5zrq6po.firebaseio-demo.com/"));
		return {
			getThings: function (id) {
				var deferred = $q.defer(),
					ref1 = fbRef.$child(id);

				// Resolves the promise once the data is loaded from firebase
				ref1.$on('loaded', function (data) {
					deferred.resolve(ref1);
				});

				return deferred.promise;
			}
		}
	})

	.directive('myThings', function (myModel) {
		return {
			template:	'<div>Hello, {{thingsListB.thing1}}!</div>',
			restrict: 'A',
			scope: {
				elemId: '@myThings'
			},
			link: function postLink(scope, iElement, iAttr) {
				myModel.getThings(scope.elemId).then(function (things) {
					scope.thingsListB = things;
				});
			}
		}
	})

	.controller('myCtrl1', function($scope, myModel) {
		myModel.getThings('test1').then(function (things) {
			$scope.thingsListA = things;
		});

		// Something like this might do the trick
		// $scope.$watch('thingsListA', function () {
		// 	$scope.thingsListA.$heyIChanged();
		// });
	})

	.controller('myCtrl2', function($scope) {
		$scope.foo = 'foo';
	});