<?php
require("includes/check_auth_user.php");
require("includes/dbconnect.php");
include ('includes/function.php');
?>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <body>
        <div data-ng-app="">
            <p>N1: <input type="number" data-ng-model="n1"></p>
            <p>N2: <input type="number" data-ng-model="n2"></p>                               
            <h1>{{ n2 + n1 }}</h1>                     
        </div>

<!--        <div ng-app="" ng-init="quantity=1;cost=5">
            <p>Total in dollar: {{ quantity * cost}}</p>
        </div>-->

        <!--<div data-ng-app="myApp" data-ng-controller="myctrl">    (data is for validation) controller -->
        <!--        <div data-ng-app="" ng-init="mycol='red'">        input background colour change example start ---
                    <input type="text" style="background-color:{{mycol}}" data-ng-model="mycol">
                    <h1 data-ng-bind="mycol"></h1>                          ---- end
                </div>-->
        <!-- (controller javascript) --> 
        <!--<script>-->      
        <!--            var app = angular.module('myApp', []);      // Defines Angular App
                    app.controller('myctrl', function($scope) {
                        $scope.name = 'Faisal';
                    });-->
        <!--</script>-->

        <!--<div ng-app="" ng-init="first='John'">                     initialization of a variable-->
    <!--<p>Input something in the input box:</p>-->
    <!--<p>Name: <input type="text" ng-model="name"></p>-->
<!--    <p>N1: <input type="text" ng-model="n1"></p>
        <p>N2: <input type="text" ng-model="n2"></p>                                ng-model (data)
        <h1 ng-bind="first"></h1>                        binding model to view (n1 & n2 too h1)-->
        <!--<h1>{{5+5}}</h1>                                                    defining expression-->

</html>
<!-- (Understanding scope) 
If we consider an AngularJS application to consist of:

View, which is the HTML.
Model, which is the data available for the current view.
Controller, which is the JavaScript function that makes/changes/removes/controls the data.
Then the scope is the Model.

The scope is a JavaScript object with properties and methods, which are available for both the view and the controller.
--> 