<!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>