title: $watch configuration error angularjs
body: <p>I want to display some items in several rows. The user can choose if displaying 3 or 4 items per row.
  Columns get updated with the correct class, but items per row doesn't.
  I've commented the $watch sentence where I think the problem is.</p>
  
  <p>html file:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" ng-app="miTienda"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link rel="stylesheet" href=" node_modules/bootstrap/dist/css/bootstrap.min.css"&gt;
  &lt;/head&gt;
  
  &lt;body ng-controller="TiendaController as tienda"&gt;
      &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          Número de columnas: &lt;input ng-model="tienda.numColumnas" type="number" min="3" max="4" /&gt;
      &lt;/div&gt;
          &lt;div class="row" ng-repeat="fila in tienda.filas"&gt;
              &lt;div ng-class="{'col-sm-4': tienda.numColumnas == 3, 'col-sm-3': tienda.numColumnas == 4}" ng-repeat="producto in fila"&gt;
                  &lt;h4&gt;
              {{producto.nombre}} 
              &lt;span class="label" ng-class="tienda.stockClass({{producto.stock}})"&gt;Stock: {{producto.stock}}&lt;/span&gt;
              &lt;/h4&gt;
                  &lt;p&gt;{{producto.precio|currency}}&lt;/p&gt;
                      &lt;img class="img-responsive" ng-src="{{producto.imagen}}"&gt;
                      &lt;button type="button" class="btn btn-primary pull-right" ng-disabled="producto.stock===0"&gt;
                          &lt;span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"&gt;&lt;/span&gt; Añadir al carro&lt;/button&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="node_modules/angular/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/angular-locale_es-es.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/app7c.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>js file: </p>
  
  <pre><code>'use strict';
  var app = angular.module('miTienda', []);
  app.controller('TiendaController', function() {
      this.productos = articulos;
      this.stockClass = function(stock) {
          if (stock &gt;= 15) {
              return 'label-info';
          } else if (stock === 0) {
              return 'label-danger';
          } else {
              return 'label-warning';
          }
      };
  
      /*las columnas que quiero por cada fila*/
      this.numColumnas = 3;
  
      this.getFilas = function(array, columns) {
          var filas = [];
  
          //http://stackoverflow.com/questions/8495687/split-array-into-chunks
          var i, j, temparray, chunk = columns;
          for (i = 0, j = array.length; i &lt; j; i += chunk) {
              temparray = array.slice(i, i + chunk);
              filas.push(temparray);
          }
          return filas;
      };
      this.filas = this.getFilas(this.productos, this.numColumnas);
      /*el observador:*/
      /*this.$watch('this.numColumnas', function() {
          this.filas = this.getFilas(this.productos, this.numColumnas);
      });*/
  });
  var articulos = [{
      nombre: 'FUJIFILM FinePix S8600 - negro - Cámara fotográfica digital',
      precio: 149.00,
      imagen: 'img/fujifilm.jpg',
      stock: 5
  }, {
      nombre: 'PANASONIC VIERA TX-55AS650E - Televisor LED 3D Smart TV',
      precio: 1499.00,
      imagen: 'img/tv.jpg',
      stock: 9
  }, {
      nombre: 'SAMSUNG Galaxy S4 Value Edition - blanco - 16 GB - Smartphone',
      precio: 399.00,
      imagen: 'img/fujifilm.jpg',
      stock: 22,
  }, {
      nombre: 'WD WD Red WD40EFRX - 4 TB - Disco duro interno - 3.5"',
      precio: 174.90,
      imagen: 'img/disco-duro.jpg',
      stock: 0,
  }, {
      nombre: 'SAMSUNG Gear Fit - negro - Reloj conectado',
      precio: 199.00,
      imagen: 'img/samsung-gear.jpg',
      stock: 34,
  }];
  </code></pre>