Scope inherance

http://angularjs.org/

HTML

<script src="https://code.angularjs.org/1.4.0/angular.min.js"></script>
<div ng-controller="MyController">
    SCOPE parent :
    <input type="text" ng-model="myvar" />
    {{ myvar }}
    <button ng-click="alert()">Afficher myvar</button>
    
    <!-- 
        le ngIf ici ne sert que à créer un nouveau scope enfant.
        Beaucoup d'autres directives font de même, par exemple ngInclude, ngRepeat, etc. 
    -->
    <div ng-if="true">
        SCOPE enfant : 
        <input type="text" ng-model="myvar" />
        {{ myvar }}
        <button ng-click="alert()">Afficher myvar</button>
    </div>
    
</div>

CSS

.ng-scope {
    padding: 10px;
    margin: 5px;
    border: 1px solid grey;
}

JavaScript

angular.module('myApp',[])
// Déclaration du controller utilisé dans le HTML
.controller("MyController",function($scope) {
    // Création de la variable
    $scope.myvar = 'TOTO';
    
    // Faire un alert javascript avec myvar
    $scope.alert = function(){
        alert($scope.myvar);
    };
});