AngularJS objects dependencies injection

HTML

<script src="http://code.angularjs.org/1.0.2/angular.min.js"></script>
<h1>Test</h1>
<div ng-controller="NewItemCtrl">
    <div>
        <ul>
            <li data-ng-bind="item.pretty()" data-ng-repeat="item in items"></li>
        </ul>
    </div>
    <div>
        <h2>Add a new item</h2>
        <ol>
            <li>
                Name: <input data-ng-model="name" />
            </li>
            <li>
                Price: <input data-ng-model="price" type="number" />
            </li>
            <li>
                <input data-ng-click="addToList()" type="button" value="Add item" />
            </li>
        </ol>
    </div>
</div>

CSS

li
{
  margin-left :510px;
}

JavaScript

"use strict";

var Item = function($filter, name, price) {
    var self = this;

    self.name = name;
    self.price = price;

    self.pretty = function() {
        return $filter('json')(self);
    };
};

var NewItemCtrl = function($scope, $injector) {
    $scope.name = "";
    $scope.price = "";

    $scope.items = [];

    $scope.addToList = function() {
        var item = $injector.instantiate(Item, {
            name: $scope.name,
            price: $scope.price
        });


        $scope.items.push(item);

        $scope.name = "";
        $scope.price = "";
    };
};