// 1. BINDING:
// https://docs.angularjs.org/guide/databinding
// Binding allows us to automatically synchronize data between our views and our models
// allowing our models to be the "single-source-of-truth" in our application.
// Create a text input that has an ng-model attribute of "message"
<div ng-app>
<input type="text" ng-model="message"> //ng-model binds a variable from an input field to a scope variable
<p>{{ message }}</p>
</div>
//*Ampliar angular expressions: https://docs.angularjs.org/guide/expression
// Another way to use binding in Angular applications is to use the ng-bind directive.
// is used as an element so our expressions will be hidden from the users
// until they are ready to be displayed (avoid the flashing of {{}} when loading contents)
// The downside is that the entire inner text of the element gets replaced
// with what the expression returns
<p ng-bind="message"></p>
//
// One-Time Binding
// the data is only read once from the source, then the data between the source and the view
// are no longer synchronized. Much less resource intensive way of displaying static data
// or data that only needs to be read once
<input type="text" ng-model="message" ng-init="message = 'hello'">
<p ng-bind="::message === 'hello'"></p>
//
// ng-init evaluates the given expression once when the element is initialized.
// *ng-init shouldn't be used regularly! you should be initializing your variables in your controllers