Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
<div ng-controller="myAppCtrl">
<h4>{{ cities }} // Array</h4>

  <label for="">
      First City
      <input type="text" ng-model="cities[0]">
  </label>
  <label for="">
      Second City
      <input type="text" ng-model="cities[1]">   
  </label>
  <label for="">
      Third City
      <input type="text" ng-model="cities[2]">
  </label>
  <label for="">
  Fourth City
      <input type="text" ng-model="cities[3]">
  </label>

  <h4>{{ city }} // Object</h4>

  <label for="">
      Name
      <input type="text" ng-model="city.name">
  </label>
  <label for="">
      Country
      <input type="text" ng-model="city.country">   
  </label>
  <label for="">
      Population
      <input type="text" ng-model="city.population">
  </label> 

  <h4>$scope.firstPlanet, $scope.secondPlanet // scope items </h4>

  <label for="">
      First Planet
      <input type="text" ng-model="firstPlanet">
  </label>
  <label for="">
      Second Planet
      <input type="text" ng-model="secondPlanet">   
  </label>

      <pre>
      
      $scope.$watchCollection('cities', function(newNames, oldNames) {
        console.log('*** Watched has been fired. ***');
        console.log('New Names :', newNames);

      });

       $scope.$watchCollection('city', function(newNames, oldNames) {
        console.log('*** Watched has been fired. ***');
        console.log('New Names :', newNames);

      });

      $scope.$watchCollection('[firstPlanet, secondPlanet]', function(newValues){
        console.log('*** Watched has been fired. ***');
        console.log('New Planets :', newValues[0], newValues[1]);
      });

      </pre>
      </div>

CSS

label {
    display: block;
    padding: 10px;
}

h4 {
    padding: 20px 10px;
}

JavaScript

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

myApp.controller('myAppCtrl', ['$scope', function ($scope) {

            $scope.cities = ['Salvador', 'London', 'Zurich', 'Rio de Janeiro']; //Array

            $scope.city = {
                name: 'London',
                country: 'England',
                population: 8.174
            }

            $scope.firstPlanet = 'Earth';
            $scope.secondPlanet = 'Mars';

            $scope.$watchCollection('countries', function(newValues, oldValues) {
              console.log('*** Watched has been fired1. ***');
              console.log('New Countries :', newValues);

            });

             $scope.$watchCollection('city', function(newValues, oldValues) {
              console.log('*** Watched has been fired555. ***');
              console.log('New Cities :', newValues);

            });

            $scope.$watchCollection('[firstPlanet, secondPlanet]', function(newValues){
              console.log('*** Watched has been fired. ***');
              console.log('New Planets :', newValues[0], newValues[1]);
            });
            
        }]);