Wijmo 5 - InputNumber

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/interop/angular/wijmo.angular.min.js"></script>
<!-- mark this as an Angular application and give it a controller -->
<div ng-app="app" ng-controller="appCtrl" class="container">
    
<h1>InputNumber</h1>

    <p>Please enter a number between zero and ten:</p>
    <wj-input-number
        value="theNumber"
        min="0"
        max="10"
        format="n0">
    </wj-input-number>
    
    <p></p>
    
    <p>Set the "step" property to add spinner buttons:</p>
    <wj-input-number
        value="theNumber"
        min="0"
        max="10"
        step="1"
        format="n0">
    </wj-input-number>

    <p></p>

    <p>Number as seen by the controller: <b>{{theNumber}}</b></p>
    
    <p></p>
    
    <p>Editing currencies:</p>
    <wj-input-number
        value="theAmount"
        format="c"
        step="100">
    </wj-input-number>
    <p>Currency as seen by the controller: <b>{{theAmount}}</b></p>
    
    <p></p>
    
    <p>Editing percentages:</p>
    <wj-input-number
        value="thePercentage"
        format="p0">
    </wj-input-number>
    <p>Percentage as seen by the controller: <b>{{thePercentage}}</b></p>
</div>

JavaScript

// define app, include Wijmo 5 directives
var app = angular.module('app', ['wj']);

// controller
app.controller('appCtrl', function ($scope) {
    $scope.theNumber = 0;
});