AngularJS and DOM Manipulation

This is an example of how to manipulate the DOM in AngularJS.

HTML

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<div ng-controller='MainCtrl as main'>
<a href="#" ng-click="main.load('ip')">Load IP</a>
<a href="#" ng-click="main.load('date')">Load date</a>

    <div>Your ip: {{main.ip}}</div>
    <div>Today is: {{main.date}}</div>
</div>

JavaScript

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

var MainCtrl = function ($http) {
    main = this;
    this.load = function (what) {
        if (what == 'ip') {
            $http.get('http://ip.jsontest.com/').then(function (result) {
                main.ip = result.data.ip;
            });
        }
        if (what == 'date') {
            $http.get('http://date.jsontest.com/').then(function (result) {
                main.date = result.data.date;
            });
        }
    }
};

myApp.controller('MainCtrl', MainCtrl);

angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});