ng-model Doesn't Work Inside ng-if | Scope Properties Doesn't Change inside ng-if | AngularJS Tutorial

If an ng-model is used inside an ng-if, then the model does not work as expected.

<div ng-app >
    <div ng-controller="main">

        Test A: {{testa}}<br />
        Test B: {{testb}}<br />
        Test C: {{testc}}<br />

        <div>
            testa (without ng-if): <input type="checkbox" ng-model="testa" />
        </div>
        <div ng-if="!testa">
            testb (with ng-if): <input type="checkbox" ng-model="testb" />
        </div>
        <div ng-if="!someothervar">
            testc (with ng-if): <input type="checkbox" ng-model="testc" />
        </div>

    </div>
</div>

The ng-if directive will create a child scope. So the CheckBox changes the testb inside of the child scope and not the outer parent scope.

To modify the data in the parent scope, you'll need to make use of $parent as given below:

You can use $parent to refer to the model defined in the parent scope like this

<input type="checkbox" ng-model="$parent.testb" />

Accessing Parent Controller Scope in Child Controller in AngularJS | AngularJS Parent Controller Scope in Child Controller | AngularJS Tutorial

We can accessing Parent Controller Scope in Child Controller in AngularJS using $parent in $scope. Let us see an example below:

 If your HTML is like below you could do something like this:

<div ng-controller="ParentCtrl">
    <div ng-controller="ChildCtrl">
    </div>
</div>

Then you can access the parent scope as follows

function ParentCtrl($scope) {
    $scope.cities = ["NY", "Amsterdam", "Barcelona"];
}

function ChildCtrl($scope) {
    $scope.parentcities = $scope.$parent.cities;
}

If you want to access a parent controller from your view you have to do something like this:

<div ng-controller="xyzController as vm">
   {{$parent.property}}
</div>

See jsFiddle: http://jsfiddle.net/2r728/

Handling Cookies in AngularJS | Session Variables in AngularJS | Managing Sessions During Page Refresh in AngularJS | AngularJS Tutorial

The $cookieStore directive gives you read/write access the local cookie. You can store session-dependent information in the same way as the ASP session uses cookies.

In order to use $cookieStore directive, we need to include the below angular-cookies script tag:

<script src=”/Scripts/angular-cookies-1.0.0rc10.js” type=”text/javascript”></script>

Next, we need to register the ngCookies module with our app as given below:

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

Then we need to inject the $cookieStore service into the angularjs Controller. The below coding snippet shows an example of how the LogonController is constructed with $cookieStore:

myApp.controller(‘LogonController’, function ($scope, $http, $location, $cookieStore) {

    $cookieStore.put(‘loggedin’, ‘true’);

});

In the above example, once the user successfully logged in we create a cookie 'loggedin' and assign value 'true' to it.

This value will be stored as key-pair value in cookies. So We can get the value of loggedin from cookies as given below from $cookieStore:

$scope.loggedIn = $cookieStore.get(‘loggedin’)

Crack your interviews with AngularJS Interview Questions

What is mean by AngularJS Directives ? | AngularJS Tutorial | AngularJS Interview Question | AngularJS Programmer Guide

AngularJS directives are extended HTML attributes with an ng prefix. For example, the ng-init directive initializes AngularJS application variables.

Sample AngularJS code snippet is given below:

<div ng-app="" ng-init="firstName='John'">

<p>The name is <span ng-bind="firstName"></span></p>

</div>

AngularJS Expressions with Arrays by Example | AngularJS Interview Question | AngularJS Programmer Guide and Tutorials

AngularJS expressions are written inside double braces: {{ expression }}. AngularJS arrays are like JavaScript arrays.

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The points are {{ points[2] }}</p>

</div>

We can also rewrite the above code using ng-bind as below:

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The points are <span ng-bind="points[2]"></span></p>

</div>

AngularJS Expressions with Objects by Example | AngularJS Interview Question | AngularJS Programmer Guide and Tutorials

AngularJS expressions are written inside double braces: {{ expression }}. AngularJS objects are like JavaScript objects.

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is {{ person.lastName }}</p>

</div>

We can also rewrite the above code using ng-bind as below:

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is <span ng-bind="person.lastName"></span></p>

</div>

AngularJS Expressions with Strings by Example | AngularJS Interview Question | AngularJS Programmer Guide and Tutorials

AngularJS expressions are written inside double braces: {{ expression }}. AngularJS strings are like JavaScript strings.

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The name is {{ firstName + " " + lastName }}</p>

</div>

We can also rewrite the above code using ng-bind as below:

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>

</div>

AngularJS Numbers using AngularJS Binding | AngularJS Interview Question and Tutorials

AngularJS numbers are like JavaScript numbers. Using ng-bind, we can bind the AngularJS numbers.
The below angularJS code snippet gives an example of AngularJS numbers using ng-bind

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>

</div>

AngularJS Expressions with Numbers by Example | AngularJS Interview Question | AngularJS Programmer Guide and Tutorials

AngularJS expressions are written inside double braces: {{ expression }}. AngularJS numbers are like JavaScript numbers.

AngularJS Numbers by Example

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: {{ quantity * cost }}</p>

</div>

What is the Use of AngularJS Controllers ? | AngularJS Tutorial | AngularJS Interview Question | AngularJS Programmer Guide

AngularJS applications are controlled by controllers. The ng-controller directive defines the controller. The controller code will execute when the page loads.

AngularJS Controller by Example

<div ng-app="" ng-controller="personController">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
function personController($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
}
</script>

Brief about AngularJS Expressions with Example ? | AngularJS Tutorial | AngularJS Interview Question | AngularJS Programmer Guide

AngularJS expressions are written inside double braces: {{ expression }}. AngularJS expressions binds data to HTML the same way as the ng-bind directive. AngularJS will "output" data exactly where the expression is written. AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables.

AngularJS Expressions by Example

<!DOCTYPE html>
<html>
<body>

<div ng-app="">
  <p>My first expression: {{ 5 + 5 }}</p>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

</body>
</html>

How to make AngularJS Compatible with HTML5 ? | AngularJS Tutorial | AngularJS Interview Question | AngularJS Programmer Guide

AngularJS directives are HTML attributes with an ng prefix. You can use data-ng-, instead of ng-, if you want to make your page HTML5 valid.

<div data-ng-app="" data-ng-init="firstName='John'">

<p>The name is <span data-ng-bind="firstName"></span></p>

</div>

Give a Basic Example of AngularJS ? | AngularJS Tutorial | AngularJS Interview Question | AngularJS Programmer Guide

Below is the simple HTML that is extended with AngularJS

<!DOCTYPE html>
<html>
<body>

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

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

</body>
</html>

AngularJS starts automatically when the web page has loaded.

The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application.

The ng-model directive binds the value of the input field to the application variable name.

The ng-bind directive binds the innerHTML of the <p> element to the application variable name.

What is the main Function of AngularJS? | AngularJS Tutorial | AngularJS Interview Question | AngularJS Programmer Guide

Below are the main functionality of AngularJS.

• AngularJS extends HTML with ng-directives.
• The ng-app directive defines an AngularJS application.
• The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
• The ng-bind directive binds application data to the HTML view.

What is AngularJS? | AngularJS Tutorial | AngularJS Interview Question | AngularJS Programmer Guide

AngularJS is a JavaScript framework. It is a library written in JavaScript. AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

Responsibilities of Controllers in Angularjs | Angularjs Interview Question | Angularjs Tutorial | Angularjs Programmer Guide

Angularjs works on model-view-controller pattern. Angularjs Controllers have three responsibilities in your app:

1. Set up the initial state in your application’s model
2. Expose model and functions to the view (UI template) through $scope
3. Watch other parts of the model for changes and take action

AngularJS End to End Web Application Guide - Session III | AngularJS Video Tutorial | AngularJS Programmer Guide

AngularJS End to End Web Application Guide Session III by Jeremy Howard

AngularJS End to End Web Application Guide - Session II | AngularJS Video Tutorial | AngularJS Programmer Guide

AngularJS End to End Web Application Guide Session II by Jeremy Howard

AngularJS End to End Web Application Guide - Session I | AngularJS Video Tutorial | AngularJS Programmer Guide

AngularJS End to End Web Application Guide Session I by Jeremy Howard

AngularJS Fundamentals | AngularJS Video Tutorial | AngularJS Programmer Guide

A 60 minutes video tutorial on AngularJS fundamentals by Dan Wahlin