Argument 'Controller' is not defined - ruby-on-rails

Question

I am making a little rails/angular project where I am trying to return a list of data from Instagram. Rails is just acting to serve files, and then will be deployed to heroku. The rest of the app is angular.
I keep getting the error
Argument 'MainController' is not a function, got undefined
So I know it has something to do with my controller. I have done a couple angular projects before and have them working, and I repeated my steps with this, but this error is driving me crazy and I cannot seem to figure out why it keeps coming up as my controller being undefined.
Here is my code;
app.js
var app = angular.module("hipstagram", ['ngResource']);
assets/javascripts/angular/services/main.js
app.factory('instagram', function($resource){
return {
fetchPopular: function(callback){
var api = $resource('https://api.instagram.com/v1/media/popular?client_id=:client_id&callback=JSON_CALLBACK',{
client_id: 'MY_CLIENT_ID'
},{
fetch:{method:'JSONP'}
});
api.fetch(function(response){
callback(response.data);
});
}
}
});
assets/javascripts/angular/controllers/main_ctrl.js
function MainController($scope, instagram){
$scope.layout = 'grid';
$scope.pics = [];
instagram.fetchPopular(function(data){
$scope.pics = data;
});
});
index.html.erb
<div ng-app="hipstagram" ng-controller="MainController">
<div class="bar">
</div>
<ul ng-show="layout == 'grid'" class="grid">
<!-- A view with big photos and no text -->
<li ng-repeat="p in pics">
<img ng-src="{{p.images.low_resolution.url}}" />
</li>
</ul>
<ul ng-show="layout == 'list'" class="list">
<!-- A compact view smaller photos and titles -->
<li ng-repeat="p in pics">
<img ng-src="{{p.images.thumbnail.url}}" />
<p>{{p.caption.text}}</p>
</li>
</ul>
</div>
From my troubleshooting, maybe angular is unable to access main controller, or I just named it wrong. If that is the case, any tips on how to get passed this would be great, I am stumped. Thanks for the help.

Answer 1

var app = angular.module("hipstagram", ['ngResource']);
app.controller("MainController", ["$scope", "instagram" ,function($scope, instagram){
$scope.layout = 'grid';
$scope.pics = [];
instagram.fetchPopular(function(data){
$scope.pics = data;
});
}]);

Answer 2

Instead of defining a global MainController function, do something like this:
app.controller('MainController', function ($scope, instagram){
$scope.layout = 'grid';
$scope.pics = [];
instagram.fetchPopular(function(data){
$scope.pics = data;
});
});
That registers the controller with the angular app so it can be used and dependency injected.