Can't set css property in a special case

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<div ng-controller="mainController">

    <input type="checkbox" ng-model="toggle"/>toggle text color ({{toggle}})
    
    <br/><br/>
    
    <div id="myElement" class="myElement" style="padding-left: 15px;" ng-style="getStyle(toggle)">
        {{myElementText}}
    </div>    
    
</div>

CSS

.myElement {
	height: 30px;
	width: 200px;
	border: 1px dotted green;
}

JavaScript

angular.module('application', []).controller('mainController', ['$scope', function ($scope) {
    
    $scope.myElementText = "element's text";
    $scope.toggle = false;
    
    $scope.getStyle = function(toggle){
        return {color:toggle ? 'red' : 'black'};
    }
    
    var myElementStyle = document.getElementById('myElement').style;
    myElementStyle.paddingTop = '20px'; 
    
    $scope.$watch('toggle', function () {
        alert('padding-left: ' + myElementStyle.paddingLeft + '\n' + 'padding-top: ' + myElementStyle.paddingTop);
        
        myElementStyle.paddingTop = '20px';
    });
    
}
]);


angular.bootstrap(document, ["application"]);