AngularJS 1.2.x - Basic app / factory / controller example

// This is an Angular app called "plunker", which is referenced in index.html.
// It depends on the controller module called "myControllers" defined in myControllers.js.
var app = angular.module("plunker", ["myControllers"]);


// A function to generate some random characters
// http://stackoverflow.com/questions/1349404/generate-a-string-of-5-random-characters-in-javascript
function makeid()
{
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for( var i=0; i < 5; i++ )
        text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
}

<!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.2.x" src="https://code.angularjs.org/1.2.20/angular.js" data-semver="1.2.20"></script>
    <script data-require="angular-translate@2.2.0" data-semver="2.2.0" src="https://rawgithub.com/angular-translate/bower-angular-translate/master/angular-translate.js"></script>
    <link data-require="ng-table@0.3.0" data-semver="0.3.0" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.css" />
    <script data-require="ng-table@0.3.0" data-semver="0.3.0" src="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.js"></script>
     <script src="myApp.js"></script>
    <script src="myControllers.js"></script>
    <script src="myServices.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <table data-ng-table>
      <tbody>
        <tr data-ng-repeat="task in tasks">
          <td data-title="'CategoryId'">
            {{task.categoryId}}
          </td>
          <td data-title="'Category'">
              <select data-ng-model="task.categoryId" data-ng-options="category.description for category in categories track by category.id"></select>
          
          </td>
        </tr>
      </tbody>
    </table>
    
    <select data-ng-model="task.categoryId" data-ng-options="category.description for category in categories track by category.id"></select>
  </body>

</html>

/* Put your css in here */

// This is a controller module named "myControllers".
// It depends on the factory module "myServices", defined in myServices.js.
// It implements a controller called "MainCtrl", which is referenced in index.html.
// "MainCtrl" has a $scope and an instance of the changeLanguage factory.
angular.module("myControllers", ["myServices"]).controller("MainCtrl", [
  "$scope", "changeLanguage", function($scope, changeLanguage) {
    $scope.tasks = [
      {categoryId: 1},
      {categoryId: 2}
    ];
    $scope.categories = [
      {id: 1, description: "cat1"},
      {id: 2, description: "cat2"}
    ];
    $scope.testCategoryId = 1;
  }
]);

// This is a factory service module called "myServices".
// It depends on "pascalprecht.translate" from angular-translate.
// It implements a factory called "changeLanguage".
angular.module("myServices", ["pascalprecht.translate"]).factory("changeLanguage", [
  "$translate", function(translate) {
    return function(langKey) {
      translate.use(langKey.random);
      if (langKey.random) {
        alert(langKey.random);
      }
    }
  }
]);