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";
});
Expected behavior was to render "foo" in red, but observed result showed it in the default black color. The issue arose when transitioning from Angular 1.0.2 to 1.4.8.
EDIT: Even after updating the controller to include the $scope dependency, certain functionalities such as positioning within a parent element still fail to work.
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 outcome was for "foo" to be rendered 100px down and to the right, but instead there was no displacement observed.