¿Por qué no cambiará los valores del modelo ng?

Por favor, echa un vistazo a mi jsFiddle

Mousing sobre divs .box.red || .box.blue le permitirá enfocarse y cambiar los valores de ng-model

 scope.box = {'blue': 0, 'red': 0}; 

Este cambio ocurre durante un evento ng-keyup ng-keydown .

keyup cambiará +1 al valor; keydown cambiará el valor por -1.

html

  

mouseover box then keypress up or down arrows indivually edit values of input model

js

 var myApp = angular.module('myApp',[]); function MyCtrl($scope) { $scope.box = {'blue': 0, 'red': 0}; } 

CSS

 .box { width:50px; height: 50px; display:inline-block; float: left; margin-right: 20px; cursor: all-scroll; } .red { background: red; } .red:hover { box-shadow: 0px 0px 15px red; } .blue { background: blue; } .blue:hover { box-shadow: 0px 0px 15px blue; } .bounding { width: 80%; margin:20% auto; } h2 { text-transform: uppercase; font-size: 14px; border-bottom: 1px solid #ccc; font-weight: bold; color: #444; font-family: arial; } h2 span { color: orange; } h2 i { color: green; } 

En su violín está utilizando AngularJS 1.0.1 que aún no tenía la directiva ng-keypress. Si no puede cambiar la versión angular que está utilizando, puede escribir su propia directiva de pulsación de tecla:

 myApp.directive('myKeypress', function() { return function(scope, elm, attrs) { elm.bind("keypress", function() { scope.$apply(attrs.onKeypress); }); }; }); 

y el marcado como:

 

Actualicé tu violín para mostrarte esto. http://jsfiddle.net/HB7LU/2627/