ng-style with scope variables in AngularJS 1.4.8 - css

Question

index.html:
<script src="app.js"></script>
<div ng-app="app" ng-controller="app" ng-style="{ color: thecolor }">
foo
</div>
app.js:
angular.module("app", [])
.controller("app", function() {
$scope.thecolor = "red";
});
Fiddle.
Expected: "foo" is rendered red. Observed: "foo" is rendered black (the default).
So basically I'm trying to set the style of an element from variables in the scope. I've seen this working in Angular 1.0.2, but I need it to work in 1.4.8.
EDIT: Once I've updated the controller to include the $scope dependency, I still can't get certain things to work, such as positioning within a parent element.
index.html:
<link rel="stylesheet" href="app.css">
<script src="app.js"></script>
<div ng-app="app" ng-controller="app">
<div ng-style="{ left: x, top: y }">
foo
</div>
</div>
app.js:
angular.module("app", [])
.controller("app", ["$scope", function($scope) {
$scope.x = 100;
$scope.y = 100;
}]);
app.css:
body {
margin: 0px;
}
div {
position: relative;
width: 100vw;
height: 100vh;
}
div div {
position: absolute;
}
Expected: "foo" is rendered 100px down and to the right. Observed: no displacement.
Fiddle.

Answer 1

Controller in your code doesnt have $scope as Dependency Injection (DI), based on your updated question modifying the answer as below
controller
angular.module("app", [])
.controller("app", ['$scope',function($scope) {
$scope.thecolor = "red";
$scope.x = 100;
$scope.y = 100;
}]);
view
<div ng-style="{ left: x + 'px', top: y + 'px' }">foo</div>
updated fiddle

Answer 2

You have to specify the unit for the CSS values - you can do it in the view:
<div ng-style="{ left: x + 'px', top: y + 'px' }">

Answer 3

You missed $scope injection in controller.
angular.module("app", [])
.controller("Ctrl", function($scope) {
$scope.thecolor = "red";
});
Here is a working demo:
http://jsbin.com/jomacoj/edit?html,js,console,output