Add elements dynamically in angularJS
<p>Sorry, maybe it's stupid question but i'm still learning.</p>

<p>I want to add some elements dynamically on a button click in my view.its working fine for me but i have some doubts.because i am learning angularJs i want to know there is any better way to do these things.</p>

<p>1.from documentation i understood angularJS is entirely different from jquery so in this example i used the same concept which we are used with jquery so i want to know if there is any better way to do this.</p>

<p>2.i can able to access dom element using $element in controller but am unable to access the same inside click event</p>

<pre><code>app.controller('SalesController',function($scope,$element) {
  //here we can access like this
  $element[0].getElementsByClassName("classSub")[0];
  $scope.Change = function () {
    //we can access variables like this
    var temp= $scope.salesData
    //but this code will not work here
    $element[0].getElementsByClassName("classSub")[0];      
  }
});
</code></pre>

<p>3.innerHTML and append is not working with getElementsByClassName but it will work with document.querySelector</p>

<pre><code>$scope.Change = function () {
  if($scope.salesData%2==0) {
    bindChart="";
    bindChart=bindChart+"&lt;div class='sub1'&gt;&lt;/div&gt;";    

    //these code will not add the div dynamically
    //document.getElementsByClassName("classSub"[0].innerHTML=bindChart;
    //document.getElementsByClassName("classSub")[0].append(bindChart);
    //document.querySelector( '.classSub' ).append(bindChart);

    //this will work
    document.querySelector( '.classSub' ).innerHTML=bindChart;
  } else {
    bindChart="";
    bindChart=bindChart+"&lt;div class='sub2'&gt;&lt;/div&gt;";
    document.querySelector( '.classSub' ).innerHTML=bindChart;
  } 
  $scope.salesData++;
}  
</code></pre>

<p>can anyone explain what is the problem... I am a beginner in angularJS</p>

<p><a href="http://jsfiddle.net/renjithgovind/c4gc01tr/" rel="nofollow">Fiddler</a></p>