AngularJS - Dont' design the page and then change it with DOM? Why?

Question

Thinking in AngularJS” if I have a jQuery background? explains Angularjs approach over jQuery approach, for DOM manipulation, very well.

From the above explanation, am still not clear on the point that talks on AngularJS approach, which says, Don't design your page, and then change it with DOM manipulations

---

By repeating the main part of the answer(above),

jQuery approach:

For a design/view (part of it, shown below):

<ul class="messages" id="log">
</ul>

you manipulate(shown below) it's DOM, to make the page dynamic,

$.ajax({
  url: '/myEndpoint.json',
  success: function ( data, status ) {
    $('ul#log').append('<li>Data Received!</li>');
  }
})

but more importantly, manipulate by manually referencing and updating it's DOM node, which is a side effect. That means, change in design/view (ul to say div) will change the DOM manipulation logic(to $('div#log')). AngularJS approach can help here.

AngularJS approach:

View may look like:

<ul class="messages">
    <li ng-repeat="entry in log">{{ entry.msg }}</li>
</ul>

and controller code (shown below), does not manually reference DOM node and makes the web page dynamic. AngularJS controller uses model($scope) for it.

$http( '/myEndpoint.json' ).then( function ( response ) {
    $scope.log.push( { msg: 'Data Received!' } );
})

This(above) is the main advantage of using Angular over jQuery/Javascript

---

So,

Using AngularJS approach, we assign a directive(ngRepeat) to an existing view/design(li). Controller code manipulates view(li) via model($scope), by not referencing the DOM node.

---

Question:

with respect to first part in the answer, how AngularJS stops to design page(view) first and then change DOM using controller via model?