javascript - AngularUI ダイアログへのデータのバインド

Question

教師がクラス情報を編集できるようにする単純な angularapp を作成しようとしています。ライトボックスを取得するために angular-ui ダイアログ ディレクティブを使用しています。userclick で、データをモーダルに渡してダイアログを開く関数を作成しました。しかし、何らかの理由でデータが適切にバインドされていません。

これは私のcontroller.jsです

'use strict';
 define(['app' ], function(app) {
  app.controller('TeacherClasses',
   [ '$scope', '$http', '$dialog','$location', 'teacherClassService',
  function($scope, $http, $dialog, $location,  teacherClassService) {
    $scope.newClass={};
    $scope.show = {"createClassModal": false};
    $http.get('/grades').success(function(data) {
        $scope.grades = data;
    });

    $scope.newClass.grade = "Grade";

    $scope.setGrade = function(grade){
        $scope.newClass.grade = grade;
    };

    $scope.fetchStudentGroups = function(){
        $http.get('/teacher/studentGroups').success(function(data) {
            $scope.studentGroups = data;
        });
    };
    $scope.fetchStudentGroups();

    $scope.createClass = function(){
        $http.post('/studentGroup', $scope.newClass).
          success(function(data, status, headers, config) {
            $scope.show.createClassModal = false;
            //Clearing it out for next time
            $scope.newClass = {};
            $scope.fetchStudentGroups();
          }).
          error(function(data, status, headers, config) {

          });
        console.log($scope.newClass);

    };


    $scope.openDialog = function(studentGroup, dialog){
        $scope.newClass = angular.copy(studentGroup);
        $scope.opts = {
            backdrop: true,
            keyboard: true,
            backdropClick: true,
            templateUrl:  '/assets/partials/teacher/manage/editClassInfo.html',
            resolve: {
                data: function(){
                    return $scope.newClass;
                }
            }
        };
        var modal = $dialog.dialog($scope.opts);
        modal.open();
    }
}]);

return app;
});

そして、これは私の部分的です

<div class="modal-header">
Edit Class
</div>

<div class="modal-body">
<form class="form-horizontal">
    <div class="control-group">
            <input type="text" ng-model="newClass.name" class="span4">
    </div>

    <div class="control-group">
            <select ui-select2 data-placeholder="Choose a grade" id="grades" class="span4">
                <option></option>
                <option ng-repeat="grade in grades" ng-model="grades" >{{grade}}</option>
            </select>
    </div>
    <label>Students {{newClass.noOfStudents}}</label>
    <label>{{newClass.name}}</label>
</form>
</div>

<div class="modal-footer"></div>

私のモジュール定義は app.js にあります

'use strict';
define([ 'angular' ], function(angular) {
    var myModule = angular.module('myApp', 
[ 'ngResource', 'ui', 'infinite-scroll', 'ngDragDrop', 'blueimp.fileupload','ui.bootstrap.dialog', 'ui.bootstrap.modal',
  'ui.bootstrap.dropdownToggle', 'LoadingIndicator', 'http-auth-interceptor']);
myModule.value('ui.config', {
    select2 : {
        allowClear : true
    },
    redactor: {
        plugins: ['fullscreen']
    }
});
return myModule;
});

しかし、これらの値はどれもビューに関連付けられていません。ここで何が間違っていますか？