Error while using ng-style instead of style in angularJS

Question

This is my code for displaying categories:

    <select ng-style="margin-left:30px;" ng-show="ShowBrand" ng-model="SelectedBrand" ng-options="x as x.name for x in Brands | orderBy:'name'" ng-class='form-control'>
        <option value="" ng-selected="selected">Select a Brand</option>
    </select>

I am seeing the following error in colsole window:

    Error: [$parse:syntax] http://errors.angularjs.org/1.2.16/$parse/syntax?p0=%3A&p1=is%20an%20unexpected%20token&p2=12&p3=margin-left%3A30px%3B&p4=%3A30px%3B
        at Error (native)
        at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:6:450
        at $a.throwError (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:165:141)
        at $a.parse (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:164:6)
        at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:96:122
        at k (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:102:227)
        at h.$watch (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:103:380)
        at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:197:313
        at J (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:53:345)
        at f http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:46:399

select ng-style="margin-left:30px;" ng-show="ShowBrand" ng-odel="SelectedBrand" ng-options="x as x.name for x in Brands | orderBy:'name'" ng-class="form-control" class="ng-pristine ng-valid">

This error is only when i am using ng-style. If i m using style instead of ng-style then not able to render on IE9.

What is reason for this error and how to fix it?

Answer 1

ngStyle expects valid expression notation. So try to pass object instead:

ng-style="{'margin-left': '30px'}"