JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.angularjs.org/1.4.8/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="MyCtrl">
    <div ng-if="!something">
      1. <input ng-model="model.text" />
    </div>
    <button ng-click="msg()">Click me!</button> ('undefined' will appear in alert)
  </div>

  <div ng-controller="MyCtrl">
    <div ng-if="!something">
      2. <input ng-model="$parent.model" />
    </div>
    <button ng-click="msg()">Click me!</button> (text will appear in alert)

    <div ng-controller="MyCtrl3">
      <div ng-if="!something">
        3. <input ng-model="model.text" />
      </div>
      <button ng-click="msg()">Click me!</button> (text also will appear in alert)
    </div>

<hr>
Id example
    <div ng-controller="MyCtrl">
       scope id: {{$id}}
       <div id="innerDiv" ng-if="!something">
         child scope id: {{$id}}
       </div>
       <div>scope id again: {{$id}}</div>
    </div>`

JavaScript

var app = angular.module('app', []);

app.controller('MyCtrl', function($scope) {
  $scope.msg = function() {
    	alert($scope.model);
  }
});


app.controller('MyCtrl3', function($scope) {
  $scope.model = {}; //if you omit this line it would behave as in first example
  $scope.msg = function() {
    alert($scope.model.text);
  }
});