Directives

AngularJS extends HTML with ng-directives:

ng-app directive defines the root element of an Angular application via a host tag (e.g. <div ng-app=””></div>). It will automatically initialize (auto-bootstrap) an application when a web page is loaded.
NOTE: If the application does not have a controller, the ng-app value can either be not set to a value (ng-app) or it can be set to an empty string (ng-app="").
ng-model directive binds the value of HTML controls (e.g., input, select, textarea) TO application data. As will be seen later, it can also be used to provide:

Application validation (e.g., numbers, emails, required)
Application status (e.g., invalid, dirty, touched, error)
CSS classes for HTML elements
HTML elements binding to HTML form elements.
NOTE: The data model is a collection of application data.

AngularJS usually have a data model which is a collection of data available for the application.

ng-bind directive binds application data TO the HTML view.
AngularJS directives are HTML attributes with an ng prefix. The "ng" is a shorthand for angular.
Use the data-ng-, instead of ng- if you want to make your page HTML valid.

Additional directives will be discussed later:

ng-init directive initialized Angular application variable data. Using ng-init is not best practice. You will learn later how to initialize data a controller.
ng-repeat directive repeats an HTML element.

In the code below:

The ng-app directive in the host div tag defines it as an AngularJS app.
The ng-model directive “model” the VALUE of the input field (whatever you type into it) TO the application variable name.
The ng-bind directive “bind” the innerHTML of the <p> element TO the application variable name.
NOTE: The HTML container (e.g., div element) that the AngularJS application is displayed in is called the view.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Enter Your Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>
     
</body>
</html>

You could set initial default value(s) of an application data or variables using the ng-init directive like this:

<div ng-app="" ng-init="name='John Doe'">

Directive Demo

NOTE: Instead of using the ng-init directive, you will learn how to set initial values later using a module and controller.

If you are NOT requiring a user to input data but just want to bind the application variable DIRECTLY to an HTML element, the ng-model directive is not used:

<div ng-app="" ng-init="name='Cornelius'">
  <p>My name is <span ng-bind="name"></span></p>
</div>

NOTE: This will result in the phrase "My name is Cornelius" when the page loads. Use data-ng- instead of ng- to make page HTML valid.