<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body ng-app="listaDeCosasPorHacer">
	<!-- Lo que esté dentro de este div estará disponible para el controlador y viceversa -->
	<div ng-controller="controladorPrincipal">
		<!-- Llamamos al elemento del controlador que definimos más abajo usando llaves dobles y omitiendo "$scope." -->

		Aquí viene texto generado en el controlador: {{tareaNueva}}
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>

	<script>
		 angular
		 	.module('listaDeCosasPorHacer', []);
 		 // Definimos el controlador como un hijo de la aplicación
 		 // por eso la referenciamos nuevamente, pero
 		 // **sin poner el array vacío después del nombre**
		 angular
		 	.module('listaDeCosasPorHacer')
		 		// En la definición del controlador primero va el
		 		// nombre como string y luego el nombre de la
		 		// función que lo representa
		 		.controller('controladorPrincipal', controladorPrincipal);
 		 
 		 // Pasamos $scope como argumento de la función,
 		 // esto es inyección de dependencias.
 		 // Si no lo pasaramos como argumento no lo podríamos usar
 		 // dentro del controlador
 		 function controladorPrincipal($scope){
 		 	$scope.tareaNueva = 'Algo que me falta hacer';
 		 }
	</script>
</body>
</html>