How do I get angularjs routes to display partials in IE 7 and 8? - url-routing

Question

I'm using AngularJS in a project and am trying to use the included routing for navigation.
I'm having a problem in IE7 and 8. When I go to one of the pages, the controller fires and the data loads. (I can see the partial being returned with all the data bound fields populated.) The problem is that the partial doesn't get added/appended to the ng-view. I started out using AngularJS v1.0.1 but now switched to 1.0.2 thinking that perhaps it was a bug in the version I was using. Any help would be greatly appreciated.
This is the code that I'm using for routing:
myApp.config(['$routeProvider', function($routeProvider, $location){
$routeProvider.when('/business/:query', { templateUrl: 'partials/detail.html', controller: 'details'});
$routeProvider.when('', { templateUrl: 'partials/splash.html'});
$routeProvider.when('/results/:query', { templateUrl: 'partials/list.html', controller: 'listController'});
$routeProvider.otherwise({redirectTo: ''});
}]);
This is the code for the controller:
myApp.controller('listController', listController = function($scope, $routeParams, $http, $cookies){
var query = $routeParams.query;
var myQuery = query.indexOf('-') > 0 ? $scope.removeDashes(query):query;
switch($scope.selected)
{
case 'name':
$http({ method: 'jsonp',
//URL to test service
url: 'http://localhost:56119/PropertyAppraiser/PABusinessSearchService.asmx/searchBusinesses?NAME=' + myQuery + '&callback=JSON_CALLBACK',
header: { 'Content-Type': 'application/json; charset=utf-8' }
})
.success(function(data){
$scope.businesses = data;
});
break;
case 'address':
$http({method:'jsonp',
//URL to test service
url:'http://localhost:56119/PropertyAppraiser/PABusinessSearchService.asmx/searchAddress?myAddress=' + myQuery + '&callback=JSON_CALLBACK',
header:{'Content-Type':'application/json; charset=utf-8'}
})
.success(function(data){
$scope.businesses = data;
})
.error(function(data){
return false;
})
break;
}
})
myApp.controller('details', details = function($scope, $http, $routeParams){
var query = $routeParams.query;
var myQuery = query.indexOf('-') > 0 ? $scope.removeDashes(query):query;
$http({ method: 'jsonp',
//URL to test service
url: 'http://localhost:56119/PropertyAppraiser/PABusinessSearchService.asmx/searchBusinesses?FOLIO=' + myQuery + '&callback=JSON_CALLBACK',
header: { 'Content-Type': 'application/json; charset=utf-8' }
})
.success(function(data){
$scope.businesses = data;
});
});
This is the HTML for the app:
<div id="ng-app" class="ng-app:myApp ng-cloak" ng-cloak ng-app="myApp" ng-controller="businessSearchCtrl">
<div id="infoContainer" >
<h1 id="mainHeader">Personal Property Account Information</h1>
<div id="searchContainer">
<h3 style="background: none; margin: 0; padding: 0">Search By Folio, Business Name, or Address:</h3>
<select ng-model="chosen" ng-options="i.id as i.name for i in items">
<option value=""></option>
</select>
<input id="searchBox" type="text" placeholder="Enter Business Name or Folio Number" ng-model="query" />
<input id="submit" type="button" ng:click="search()" value="Search"/>
</div>
<div class="ng-view">
</div>
</div>
<div style="clear:both; height:0"> </div>
</div>
<div style="clear:both; height:0"> </div>
</div>
EDIT:
It works in every other browser I've tested it in including IE9, I'm also not getting any error messages.

Answer 1

Ok, I'm posting this answer in case any other sleep deprived fathers are out there making the same types of mistakes. The html for the partial that is being included needs to have a containing element of some sort. Apparently, IE 7 and 8 can't append the html to a page unless it is completely contained inside of a block-level element.
Maybe I knew this already and simply forgot. Maybe you knew this if you're reading this now. Maybe this is why people don't use their real names for Q&A sites. What I know for sure is, front end development can be a cruel, harsh mistress...