Cómo establecer el ancho de div usando ng-style

Question 1

Estoy tratando de establecer el ancho div dinámicamente usando ng-stylepero no estoy aplicando el estilo. Aquí está el código:

<div style="width: 100%;" id="container_fform" ng-controller="custController">
    <div style="width: 250px;overflow: scroll;">
        <div ng-style="myStyle">&nbsp;</div>
    </div>
</div>

Controlador:

var MyApp = angular.module('MyApp', []);

var custController = MyApp.controller('custController', function ($scope) {
    $scope.myStyle="width:'900px';background:red";

});

¿Qué me estoy perdiendo?

Enlace de violín : violín

Question 2

La sintaxis de ng-styleno es exactamente eso. Acepta un diccionario de claves (nombres de atributos) y valores (el valor que deben tomar, una cadena vacía los desarma ) en lugar de solo una cadena. Creo que lo que quieres es esto:

<div ng-style="{ 'width' : width, 'background' : bgColor }"></div>

Y luego en tu controlador:

$scope.width = '900px';
$scope.bgColor = 'red';

Esto preserva la separación de la plantilla y el controlador: el controlador contiene los valores semánticos mientras que la plantilla los asigna al nombre de atributo correcto.

Question 3

ngStyle acepta un mapa:

$scope.myStyle = {
    "width" : "900px",
    "background" : "red"
};

Fiddle

Answer 1