title: Angular js: Change the font color and image, based on json response
body: <p>Suppose their is an external json file:</p>
  
  <pre><code>{"threat": [{"level": "Low"},{"level": "Medium"},{"level": "high"}]}
  </code></pre>
  
  <p>And following is the HTML code:</p>
  
  <pre><code>&lt;body ng-app="myApp"&gt;
     &lt;h1&gt;Page Title&lt;/h1&gt;
     &lt;img src="images/status.jpg"&gt;
     &lt;p&gt;change color&lt;/p&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>How i can change image and p tag color? depending upon the json response (threat level). </p>
  
  <ol>
  <li>High:red</li>
  <li>Low:green</li>
  <li>medium:orange</li>
  </ol>
  
  <p>I am new to Angular js, tried some methods like ng-style and ng-if to change the styles. But dint work out. </p>
  
  <p>I am trying to do something like this:</p>
  
  <pre><code>function MyController($scope, $http) {
      // Simple GET request example:
      $http({
        method: 'GET',
        url: 'data/color.json'
      }).then(function successCallback(response) {
          // this callback will be called asynchronously
          // when the response is available
          console.log(response);
            return response;
        }, function errorCallback(response) {
          // called asynchronously if an error occurs
          // or server returns response with an error status.
          console.log(response);
            return response;
        });
  }
  </code></pre>
  
  <p>But i am getting undefined in console instead of response.</p>
  
  <p>After getting response I have to check how to change image and text color?depending upon response high, Low and medium.</p>