title: How to prevent template errors on initially null-set variable?
body: <p>Let's say I have a variable</p>
  
  <pre><code>$scope.variable=null;
  </code></pre>
  
  <p>in AngularJS in my controller. I'll do a <code>$http</code> request for some data and after the request returns I assign the actual data from the response to my variable, so that the variable looks like this:</p>
  
  <pre><code>$scope.variable={'data1':'example1','data2':'example2'};
  </code></pre>
  
  <p>I also have template that presents the data, e.g.</p>
  
  <pre><code>&lt;span&gt;{{ variable.data1 }}&lt;/span&gt;
  </code></pre>
  
  <p>Before the <code>$http</code> request there is no <code>$scope.variable.data1</code> and therefore in the browser console I get an error. Even if I do </p>
  
  <pre><code>&lt;span ng-cloak ng-if="variable!=null"&gt;{{ variable.data1 }}&lt;/span&gt; 
  </code></pre>
  
  <p>it seems that the browser tries to evaluate the expression.</p>
  
  <p>Errors look e.g. like this:</p>
  
  <blockquote>
    <p>angular.js:3626 Error:  attribute width: Expected length, "{{ svgconfig.ca…"</p>
  </blockquote>
  
  <p>in a case where I want to set properties of an <code>svg</code> element.</p>
  
  <p>Is there a way to not have the errors occurs?</p>