AngularJS - Watching Styles

HTML

<div ng-app ng-controller="Ctrl">
    <span ng-style="{fontSize: fontSize, color: color}">Foosball</span>
    <br>
        Change Me! <input ng-model="fontSize" type="text" />
        <br> <input ng-model="color" type="text" />
            <br> <input type="range" min="1" max="6" steps="1" ng-model="range" ng-change="TestMe()" />
                {{rangeValue}}
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<style>
.ng-invalid { border: 1px solid red; }

JavaScript

function Ctrl($scope) {
    $scope.fontSize= '30px'
    $scope.color = 'green';
    $scope.range = "5";
    $scope.rangeValue = $scope.range;
    $scope.TestMe = function()
    {
        $scope.rangeValue = "Value : " + $scope.range;
    }
}
Ctrl.$inject = ['$scope'];