Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
  <select ng-model="query.city" ng-options="city for city in cities" fix>
      <option value="">-empty</option>
  </select>
  <pre>
       1. Select "Boston"
       2. Select "-empty"
       I'd like query={"city":""}
       But, it's query={"city":null}
      
       Live: query={{query}}
  </pre>
</div>

JavaScript

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

function MyCtrl($scope) {
    $scope.cities = ["New York", "Boston", "Philadelphia"];
    $scope.query = {city: ""};
}

myApp.directive('fix', function() {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
            ngModel.$parsers.push(function(value) {
                console.log(value);
                if ( value === null ) {
                    value = '';
                }
                console.log(value);
                return value;
            });
        }
    };
});