Change/Override Styles

http://angularjs.org/

by jacobwsmith

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<div ng-controller="myCtrl">
    <br>
    <br>
    <label>Color:
        <input type="text" placeholder="enter a color name" ng-model="backgroundColor">{{backgroundColor}}</label>
    <br>
    <br>
    
    <!-- global survey markup "add in appropriate ng-style tags" -->
    <div class="container" ng-style="{backgroundColor: backgroundColor}">
        <div class="title">Some text here</div>
    </div>
        
</div>

CSS

/* global survey styles */
 .container {
    width: 300px;
    height: 250px;
    color: #fff;
    background-color: #63A1C6;
}
.title {
    color: #fff;
    font-family:'Arial';
    font-size: 16px;
    text-align: center;
    padding-top: 3px;
}

JavaScript

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

angular.module('app').controller('myCtrl', function ($scope) {

    // Survey style override
    //$scope.backgroundColor = "";

});