How to set div width using ng-style

Question

I am trying to set the div width dynamically using `ng-style` but it is not applying the style. Here is the code: ```

``` Controller: ``` var MyApp = angular.module('MyApp', []); var custController = MyApp.controller('custController', function ($scope) { $scope.myStyle="width:'900px';background:red"; }); ``` What am I missing? Fiddle link: Fiddle

Accepted Answer

The syntax of `ng-style` is not quite that. It accepts a dictionary of keys (attribute names) and values (the value they should take, an empty string unsets them) rather than only a string. I think what you want is this: ```

``` And then in your controller: ``` $scope.width = '900px'; $scope.bgColor = 'red'; ``` This preserves the separation of template and the controller: the controller holds the semantic values while the template maps them to the correct attribute name.

How to set div width using ng-style

Solution

Problem