Mobile-Detect Check

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

app.value('MobileDetect', window.MobileDetect);

app.controller('MainCtrl', function($scope, MobileDetect) {
  var vm = this;
  vm.input = {
    userAgent: window.navigator.userAgent,
    maxPhoneWidth: 650
  };

  vm.outcome = [];
  $scope.$watch('vm.input', function (input) {
    var md = new MobileDetect(input.userAgent, parseInt(input.maxPhoneWidth, 10)),
        outcome = [];
    
    outcome.push({key: 'phone()', val:md.phone()});
    outcome.push({key: 'tablet()', val:md.tablet()});
    outcome.push({key: 'mobile()', val:md.mobile()});
    outcome.push({key: 'os()', val:md.os()});
    outcome.push({key: 'userAgent()', val:md.userAgent()});
    outcome.push({key: 'mobileGrade()', val:md.mobileGrade()});

    vm.outcome = outcome;
    
  }, true);
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
    <script src="//cdn.jsdelivr.net/mobile-detect.js/0.4.3/mobile-detect.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl as vm">
    <h1>Mobile-Detect Check</h1>
    <label for="userAgent">User-Agent:</label>
    <input id="userAgent" type="text" ng-model="vm.input.userAgent">
    <label for="maxPhoneWidth">maxPhoneWidth (-1 to disable)</label>
    <input id="maxPhoneWidth" type="number" ng-model="vm.input.maxPhoneWidth">
    <h2>Result:</h2>
    <dl>
      <dt ng-repeat-start="item in vm.outcome">
        {{item.key}}
      </dt>
      <dd ng-repeat-end>
        {{item.val || '---'}}
      </dd>
    </dl>
    
  </body>

</html>

/* Put your css in here */

input {
  width: 100%;
}