参数控制器不起作用,在Error时未定义

I'm using AngularJS + Laravel for my web-application. AngularJS install in public/app folder, the view for my web-application is not from public/app, is from Laravel/app/view folder.

-views
--web-app
---partials
---chat-rooms.blade.php
--index.blade.php

Index.blade.php

<body ng-app='chatApp'>
    <div class="page-header">
        <h1> Chat application </h1>
    </div>
    <div ng-view class="container"></div>
    {{ HTML::script('app/libs/angular/angular.min.js')}}
    {{ HTML::script('app/libs/angular-route/angular-route.min.js')}}
    {{ HTML::script('app/scripts/app.js')}}
    {{ HTML::script('app/scripts/controllers/chat-rooms.js')}} 
</body>

Chat-rooms.blade.php

<div class="row">
<div class="col-md-12">
    <select class="form-control" ng-model="selectedChatRoom" ng-options="chatRoom.name for chatRoom in chatRooms">
    </select>
    <button type="button" ng-click="selectChatRoom(selectedChatRoom)">Select chat room</button>
</div>
<div class="col-md-12">
    <input type="text" class="form-control" ng-model="chatRoom.name" placeholder="Enter chat room name">
    <button type="button" ng-click="createChatRoom(chatRoom)">Create</button>
</div>

My app.js is from public/app folder :

'use strict';
angular.module('chatApp', ['ngRoute'])
.config(function($routeProvider) {

    $routeProvider

    .when('/', {
        templateUrl: 'partials/chat-rooms',
        controller: 'ChatRoomsCtrl'
    })

    .when('/chat-room/:chatRoom', {
        templateUrl: 'partials/chat-room.html',
        controller: 'ChatRoomCtrl'
    });
});

The problem now is "ChatRoomsCtrl" cause this problem, the function is undefined. Here's the js:

'use strict';

angular.module('chatApp')
.controller('ChatRoomsCtrl', function($scope, ChatRoom, $location) {


    var chatRoomsLoaded = function(chatRooms) {
        $scope.chatRooms = chatRooms;
    }

    var handleErrors = function(response) {
        console.error(response);
    }


    $scope.selectChatRoom = function(chatRoom) {

        $location.path('chat-room/' + chatRoom.id);
    }

    $scope.createChatRoom = function(chatRoom) {

        ChatRoom.create(chatRoom).then($scope.selectChatRoom);
    }


    ChatRoom.getAll()
        .then(chatRoomsLoaded)
        .catch(handleErrors);

});

Again, everything seems work, the front-end can work, but the backends couldn't. The create button "ng-click" doesn't toggle at all. Seems like controller is causing this.


Part of my index.blade.php is actually put inside my video template. My video template consist of videoController and route...

VideoController

public function getChatRoom()
{
    return View::make('chat-app.partials.chat-rooms');
}

Route

Route::get('video/{slug}', array(
'as' => 'showVideo',
'uses' => 'VideoController@show'
));

Route::get('video/partials/chat-rooms', array(
'uses' => 'VideoController@getChatRoom'
));

When I load the chat-rooms, the web address must be video/partials/chat-rooms.. Currently I'm surfing the video template, part of it was chat-app, the web address is video/{slug}/ which slug could be any name...

ERROR : Click here to view the error