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

    <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <script data-require="angular-route@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>

    <div ng-view></div>

(function() {
  var app = angular.module('app', ['ngRoute']);

    function($routeProvider) {
      $routeProvider.when('/', {
        templateUrl: 'home.html',
        controller: 'HomeCtrl'

  app.controller('HomeCtrl', [
    '$scope', '$routeParams',
    function($scope, $routeParams) {
      $scope.id = $routeParams.id;
/* Styles go here */

When I have multiple `id` parameters in query, `$routeParams.id` gives me an array.
That's great. But, if only one `id` is present in the query, I get a string.

    /?id=12&id=34&id=56    // $routeParams.id = ["12", "34", "56"]
    /?id=12                // $routeParams.id = "12"

This is bad. Because in the first case, `$routeParams.id[0]` gives `"12"`,
while in the second one, it gives `"1"` (first char of `"12"`).

I can work this around by inserting an empty `id=` to all my links, but this is ugly.

Is type-checking in controller is my only option? If so, how do I do it?
    <a href="#/?id=12&id=34&id=56">#/?id=12&id=34&id=56</a> Array

    <a href="#/?id=12">#/?id=12</a> String

    <a href="#/?id=12&id=">#/?id=12&id=</a> Array (ugly workaround)

<pre>id: {{id | json:0}}</pre>

<pre>id[0]: {{id[0] | json}}</pre>