User cannot input information into a bootstrap modal form - html

Question

I've been getting this weird bug with Bootstrap Modals for a few days now, and can't seem to find any sort of answer online. I'd be grateful for any sort of help on this.
My site uses AngularJS + Bootstrap. The specific part I'm working on right now has two buttons that bring up a modal, and a grid below them that shows the user a bunch of info. The weird part is, the button that allows users to create an entry on the grid will bring up a form, but not allow them to edit the first two fields. The second button, which lets users edit an entry on the grid, is pretty much formatted the same as the create button, yet that works fine. This also only occurs on page refresh only, and is resolved after the user clicks the edit button to bring up that modal, then closes that. Afterward, the create modal will work fine. Here is the code for these parts of the site:
Modal Buttons:
<div class="row-fluid" ng-init="getAllSources()">
<!-- Create Source Modal Button -->
<button class="btn btn-success" data-toggle="modal" data-target="#createSource" ng-click="initCreateSource()">+ Create Source</button>
<!-- Edit Source Modal Button -->
<button class="btn btn-primary pull-right" data-toggle="modal" data-target="#editSource">Edit Source</button>
<!-- Sources Grid -->
<div ng-show="visible.grid == true" class="edus-admin-manage-grid" style="margin-left:0;" ng-grid="sourceGridOptions"></div>
</div>
Modals:
<div class="modal fade" id="createSource" tabindex="-1" role="dialog" aria-labelledby="createSourceLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="createSourceModal">Create Source</h4>
</div>
<div class="modal-body" ng-include="'source-create.html'"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="getAllSources()" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" ng-click="getAllSources()" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
(The Edit Sources Modal looks the exact same as the Create Sources Modal, with the exception of a different link in the ng-include, and some labels here and there)
Here is the part of the code that doesn't 'work' on page refresh:
<form name="form" novalidate>
<div class="row-fluid">
<label for="inputID">* Source Id</label>
<label for="inputName">* Source Name</label>
</div>
<div class="row-fluid">
<input type="text" class="span4" id="inputId" placeholder="Title" ng-model="createSource.createId" required>
<input type="text" class="span8" id="inputName" placeholder="Source Name" ng-model="createSource.createName" required>
</div>
<div class="edus-admin-manage-label-rows row-fluid ">
<label class="edus-admin-manage-label span4" for="inputId">* Activity Name</label>
<label class="edus-admin-manage-label span4" for="inputName">* Activity Label</label>
</div>
<div class="row-fluid form-inline">
<select class="span4" ng-model="activityType.activity" ng-options="value.name for value in multipleActivityTypes" data-style="btn" bs-select></select>
<select class="span4" ng-model="activityType.label" ng-options="value for value in activityLabels" data-style = "btn" bs-select></select>
<input class="btn btn-default span4" type="submit" ng-click="activityTypeSubmit()" value="Add Activity" data-style="btn"/>
</div>
...
</form>
Everything else after the '...' in the third snippet of the code works - I just can't select any options from the pull down menu, or input anything for the Source Id/Name fields. I figured the ngClick I had in the Create Source button that brought up the modal could've been the problem, so I removed that to see if the form was editable - no luck there. Any help is greatly appreciated!
Update:
Originally, I had my HTML organized as so:
<div>
<!-- Modal Buttons -->
</div>
<!-- Modals -->
When I moved my modals back into the divs that contained the buttons, like so:
<div>
<!-- Modal Buttons -->
<!-- Modals -->
</div>
everything worked as intended. This seems like some sort of scoping issue, which I didn't think would cause a problem in HTML - can anyone shed some light on this type of problem?

Answer 1

It's very hard to determine issue when you paste it here wildly. Please use plunker for such issues. And look at this demo in Plnkr
Consider your data structure is like
$scope.activityType = {
'activityType.activity': {}
};
$scope.multipleActivityTypes = [
{
'name': 'asd',
'val': 123
},
{
'name': 'qwe',
'val': 234
}
];
p.s. i should comment this, but not enought pts. so sorry for that